图片懒加载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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
javascript之锁定表格栏位
Jun 29 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
js实现右键菜单功能
Nov 28 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
npm 语义版本控制详解
Sep 10 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数据库密码的找回的步骤
2011/01/12 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
Angular排序实例详解
2017/06/28 Javascript
详解vue中组件参数
2018/07/09 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Python使用wxPython实现计算器
2018/01/30 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
keras.layer.input()用法说明
2020/06/16 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
flask框架中的cookie和session使用
2021/01/31 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
请说出几个常用的异常类
2013/01/08 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
学校计划生育责任书
2015/05/09 职场文书
AJAX学习笔记
2021/05/18 Javascript