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源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
员工团队活动方案
2014/08/28 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android