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 相关文章推荐
实现只能输入数字的input不用replace方法
Sep 12 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
微信小程序实现可长按移动控件
Nov 01 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
Syphon 使用方法
2021/03/03 冲泡冲煮
php学习之变量的使用
2011/05/29 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
python遍历类中所有成员的方法
2015/03/18 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
保密协议书范本
2014/04/22 职场文书
毕业赠语大全
2015/06/23 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server