图片懒加载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 相关文章推荐
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
易被忽视的js事件问题总结
May 14 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
超清晰的document对象详解
2007/02/27 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
javascript实现数独解法
2015/03/14 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python中的多重继承实例讲解
2014/09/28 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
厂长助理岗位职责
2013/12/27 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL