• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >HBuilder教程 > HBuilder MUI 基于plus.downloader的图片懒加载功能,支持本地缓存

HBuilder MUI 基于plus.downloader的图片懒加载功能,支持本地缓存

作者:教程 字体:[增加 减小] 来源:互联网 时间:2017-05-31

本文主要包含hbuilder mui,hbuilder mui视频教程,hbuilder mui教程,hbuilder mui api,hbuilder mui app等相关知识,教程希望在学习及工作中可以帮助到您
"); </div> 1.页面先引入[async.js](https://github.com/caolan/async)
2.本地缓存的代码使用到了[这个链接](http://www.bcty365.com/content-146-2588-1.html)
  建议在懒加载前给img一个默认图片 

  1.  /** 
  2.  * 将网络图片下载到本地并显示,包括缓存 www.bcty365.com 
  3.  */ 
  4. (function(lazyimg) { 
  5.  
  6.     lazyimg.lazyLoad = function(doc, cb) { 
  7.  
  8.         lazyLoad(doc ? doc : document); 
  9.     } 
  10.     var lazyLoad = function(doc, cb) { 
  11.         var imgs = doc.querySelectorAll('img.lazy'); 
  12.         async.each(imgs, function(img, cb1) { 
  13.             var data_src = img.getAttribute('data-src'); 
  14.             if (data_src && data_src.indexOf('http://') >= 0) { 
  15.                 common.cache.getFile(data_src, function(localUrl) { 
  16.                     setPath(img, localUrl); 
  17.                 }); 
  18.             } 
  19.         }, function() { 
  20.             cb && cb(); 
  21.         }); 
  22.  
  23.     } 
  24.  
  25.     function setPath(img, src) { 
  26.         img.setAttribute('src', src); 
  27.         img.classList.remove("lazy"); 
  28.     } 
  29. }(window.Lazyimg = {})); 
  30.  
  31. 使用 
  32.  
  33. var getImgs=function(cb){ 
  34.     var imgs=document.querySelectorAll("img"); 
  35.     imgs=mui.slice.call(imgs); 
  36.     imgs.forEach(function(item, index, array) { 
  37.         item.setAttribute("data-src", "远程链接") 
  38.     }); 
  39.     cb&&cb(); 
  40. } 
  41. getImgs(function(){ 
  42.     Lazyimg.lazyLoad(); 
  43. }); 

 

您可能想查找下面的文章:

  • MUI Hbuilder设置模拟器运行APP项目图文教程
  • MUI APP 项目收到Appstore的警告邮件
  • HBuilder mui页面怎么跳转到Android原生界面?
  • HBuilder mui框架开发的App如何查询App的uid
  • mui H5游戏平台完整源码
  • mui app在线更新
  • HBuilder打包mui app Android签名证书的生成
  • MUI H5+ app自动更新思路与实现
  • hbuilder mui IOS 平台离线打包定位插件配置
  • HBuilder mui 页面传参终极版

相关文章

  • 2017-05-31mui.ajax 增加 dataType="json"后,报406错误
  • 2017-05-31Uncaught TypeError: Cannot read property '0' of undefined at js/mui.min.js:7
  • 2017-05-31Native.js获取安卓设备device.uuid-Android平台
  • 2017-05-31iOS平台-Native.js获取GPS授权状态
  • 2017-05-31mui.plusready和mui.ready 随先随后?
  • 2017-05-31HBuilder MUI 为textarea添加语音输入和清除的功能
  • 2017-05-31MUI 关于二维码扫描识别率的问题
  • 2017-05-31如何获取scroll滚动条高度
  • 2017-05-31Android硬件加速的配置与踩坑注意
  • 2017-05-31移动端默认返回按键,使用h5+修改默认事件

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Hbuilder MUI 两个对象合并成一个对象
    • mui 对话框 点击按钮不关闭对话框的办法
    • Hbuilder mui如何close掉除了当前webview的其它所有webview
    • Hbuilder MUI 如何自定义错误页面?
    • MUI 判断子页面是否加载完成在显示父页面
    • MUI 模板页面实现原理及多端适配指南
    • mui获取百度地图定位功能
    • Hbuilder MUI创建新的Webview窗口
    • Native.js调用讯飞的文字转语音功能(TTS)-Android平台
    • Hbuilder MUI App云端打包失败常见问题汇总

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有