图片懒加载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 相关文章推荐
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
微信小程序实现吸顶效果
Jan 08 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
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
读jQuery之十 事件模块概述
2011/06/27 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
微信JS接口大全
2016/08/25 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
Python变量作用范围实例分析
2015/07/07 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
高中校园广播稿
2014/01/11 职场文书
2015年大学生工作总结
2015/04/21 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
升学宴来宾致辞
2015/07/27 职场文书
二年级数学教学反思
2016/02/16 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python