图片懒加载imgLazyLoading.js使用详解


Posted in Javascript onSeptember 15, 2020

本文主要介绍web前端使用图片懒加载imgLazyLoading ,供大家参考,具体内容如下

1、html代码

//懒加载对象目标代码
<img originalSrc="__PUBLIC__/images/home/icon_pingtuan.png">
//引用本地js
<script src="__PUBLIC__/js/imgLazyLoading.min.js"></script>
<script src="__PUBLIC__/js/imgLazyLoading.js"></script>

2、js代码

imgLazyLoading.min.js

jQuery.fn.extend({
 delayLoading: function (a) {
  function g(d) {
   var b, c;
   if (a.container === undefined || a.container === window) {
    b = $(window).scrollTop();
    c = $(window).height() + $(window).scrollTop()
   } else {
    b = $(a.container).offset().top;
    c = $(a.container).offset().top + $(a.container).height()
   }
   return d.offset().top + d.height() + a.beforehand >= b && c >= d.offset().top - a.beforehand
  }

  function h(d) {
   var b, c;
   if (a.container === undefined || a.container === window) {
    b = $(window).scrollLeft();
    c = $(window).width() + $(window).scrollLeft()
   } else {
    b = $(a.container).offset().left;
    c = $(a.container).offset().left + $(a.container).width()
   }
   return d.offset().left + d.width() + a.beforehand >= b && c >= d.offset().left - a.beforehand
  }

  function f() {
   e.filter("img[" + a.imgSrcAttr + "]").each(function (d, b) {
    if ($(b).attr(a.imgSrcAttr) !== undefined && $(b).attr(a.imgSrcAttr) !== null && $(b).attr(a.imgSrcAttr) !== "" && g($(b)) && h($(b))) {
     var c = new Image;
     c.onload = function () {
      $(b).attr("src", c.src);
      a.duration !== 0 && $(b).hide().fadeIn(a.duration);
      $(b).removeAttr(a.imgSrcAttr);
      a.success($(b))
     };
     c.onerror = function () {
      $(b).attr("src",
       a.errorImg);
      $(b).removeAttr(a.imgSrcAttr);
      a.error($(b))
     };
     c.src = $(b).attr(a.imgSrcAttr)
    }
   })
  }

  a = jQuery.extend({
   defaultImg: "",
   errorImg: "",
   imgSrcAttr: "originalSrc",
   beforehand: 0,
   event: "scroll",
   duration: "normal",
   container: window,
   success: function () {
   },
   error: function () {
   }
  }, a || {});
  if (a.errorImg === undefined || a.errorImg === null || a.errorImg === "")a.errorImg = a.defaultImg;
  var e = $(this);
  if (e.attr("src") === undefined || e.attr("src") === null || e.attr("src") === "")e.attr("src", a.defaultImg);
  f();
  $(a.container).bind(a.event, function () {
   f()
  })
 }
});

imgLazyLoading.js

$(function () {
 $("img").delayLoading({
  //defaultImg: "__PUBLIC__/images/img/loading.gif",   // 预加载前显示的图片
  errorImg: "",      // 读取图片错误时替换图片(默认:与defaultImg一样)
  imgSrcAttr: "originalSrc",   // 记录图片路径的属性(默认:originalSrc,页面img的src属性也要替换为originalSrc)
  beforehand: 0,      // 预先提前多少像素加载图片(默认:0)
  event: "scroll",      // 触发加载图片事件(默认:scroll)
  duration: "normal",     // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000),默认:"normal"
  container: window,     // 对象加载的位置容器(默认:window)
  success: function (imgObj) { },  // 加载图片成功后的回调函数(默认:不执行任何操作)
  error: function (imgObj) { }   // 加载图片失败后的回调函数(默认:不执行任何操作)
 });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
基于jquery.page.js实现分页效果
Jan 01 #jQuery
jquery实现企业定位式导航效果
Jan 01 #jQuery
jquery实现楼层滚动效果
Jan 01 #jQuery
jquery实现左右轮播切换效果
Jan 01 #jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 #jQuery
three.js实现3D模型展示的示例代码
Dec 31 #Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 #Javascript
You might like
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
javascript读取xml
2006/11/04 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
Python实现多行注释的另类方法
2014/08/22 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python实现简易学生信息管理系统
2020/04/05 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
采购员岗位职责
2013/11/15 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
物流司机岗位职责
2013/12/28 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年环保工作总结
2014/11/26 职场文书
环卫工作个人总结
2015/03/04 职场文书
新郎婚礼致辞
2015/07/27 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
导游词之太原天龙山
2020/01/02 职场文书