图片懒加载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 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
layui实现table加载的示例代码
Aug 14 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实现快钱支付功能(涉及到接口)
2013/07/01 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
5 cool javascript apps
2007/03/24 Javascript
this[] 指的是什么内容 讨论
2007/03/24 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
python实现连接mongodb的方法
2015/05/08 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
探亲邀请信范文
2014/01/30 职场文书
三方合作协议书范本
2014/04/18 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
关于教师节的广播稿
2015/08/19 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL