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 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
vue3中的组件间通信
Mar 31 Vue.js
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
用PHP函数解决SQL injection
2006/10/09 PHP
ASP知识讲座四
2006/10/09 PHP
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
Python 多维List创建的问题小结
2019/01/18 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
如何基于Python批量下载音乐
2019/11/11 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
python实现连连看游戏
2020/02/14 Python
Python 在函数上添加包装器
2020/07/28 Python
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
大学生大二自我鉴定
2013/10/28 职场文书
反邪教警示教育方案
2014/05/13 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
工作简报怎么写
2015/07/21 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL