图片懒加载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 操作select标签实现代码
May 14 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 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简单计算两个时间差的方法示例
2017/06/20 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
JS获取时间的方法
2015/01/21 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
Python中input和raw_input的一点区别
2014/10/21 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
策划主管的工作职责
2013/11/24 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
小学学校评估方案
2014/06/08 职场文书
先进基层党组织材料
2014/12/25 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL