javascript瀑布流式图片懒加载实例


Posted in Javascript onJune 28, 2020

最近项目使用到了“懒加载”,现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js 。当然也可以和jQuery 通用。

代码如下:

/**
 * Created by zhiqiang on 2015/10/14.
 * hpuhouzhiqiang@gmail.com
 * 图片的懒加载
 **/
function loadImgLazy(node) {
 var lazyNode = $('[node-type=imglazy]', node),
 mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,
 imgDataSrc, localUrl;

 localUrl = location.href;
 // 获取当前浏览器可视区域的高度
 mobileHeight = $(window).height();

 return function(co) {

 var conf = {
 'loadfirst': true,
 'loadimg': true
 };

 for (var item in conf) {
 if (item in co) {
 conf[item] = co[item];
 }
 }

 var that = {};
 var _this = {};
 /**
 * [replaceImgSrc 动态替换节点中的src]
 * @param {[type]} tempObject [description]
 * @return {[type]} [description]
 */
 _this.replaceImgSrc = function(tempObject) {
 var srcValue;

 $.each(tempObject, function(i, item) {
 imgObject = $(item).find('img[data-lazysrc]');
 imgObject.each(function(i) {
  imgDataSrc = $(this).attr('data-lazysrc');
  srcValue = $(this).attr('src');
  if (srcValue == '#') {
  if (imgDataSrc) {
  $(this).attr('src', imgDataSrc);
  $(this).removeAttr('data-lazysrc');
  }
  }
 });
 });
 };

 /**
 * 首屏判断屏幕上是否出现imglazy节点,有的话就加载图片
 * @param {[type]} i) {  currentNodeTop [description]
 * @return {[type]} [description]
 */
 _this.loadFirstScreen = function() {
 if (conf.loadfirst) {
 lazyNode.each(function(i) {
  currentNodeTop = $(this).offset().top;
  if (currentNodeTop < mobileHeight + 800) {
  _this.replaceImgSrc($(this));
  }
 });
 }
 };

 //当加载过首屏以后按照队列加载图片
 _this.loadImg = function() {
 if (conf.loadimg) {
 $(window).on('scroll', function() {
  var imgLazyList = $('[node-type=imglazy]', node);
  for (var i = 0; i < 5; i++) {
  _this.replaceImgSrc(imgLazyList.eq(i));
  }
 });
 }
 };

 that = {
 replaceImgSrc: _this.replaceImgSrc(),
 mobileHeight: mobileHeight,
 objIsEmpty: function(obj) {
 for (var item in obj) {
  return false;
 }
 return true;
 },
 destory: function() {
 if (_this) {
  $.each(_this, function(i, item) {
  if (item && item.destory) {
  item.destory();
  }
  });
  _this = null;
 }
 $(window).off('scroll');
 }
 };
 return that;
 };
}

希望本文对大家学习javascript图片懒加载有所帮助。

Javascript 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
Bootstrap创建可折叠的组件
Feb 23 #Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 #Javascript
Web开发必知Javascript技巧大全
Feb 23 #Javascript
JQUERY表单暂存功能插件分享
Feb 23 #Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 #Javascript
jQuery实现返回顶部功能
Feb 23 #Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 #Javascript
You might like
JavaScript库 开发规则
2009/01/31 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
详解Python核心对象类型字符串
2018/02/11 Python
Python学习小技巧总结
2018/06/10 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Python中按键来获取指定的值
2019/03/02 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
python安装本地whl的实例步骤
2019/10/12 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
主治医师岗位职责
2013/12/10 职场文书
授权委托书格式
2014/07/31 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
工作会议简报
2015/07/20 职场文书
2016年学校招生广告语
2016/01/28 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书