图片懒加载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下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
vue 如何使用递归组件
Oct 23 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
基于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/04/12 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
python实现的简单文本类游戏实例
2015/04/28 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
深入理解Django-Signals信号量
2019/02/19 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
简单介绍django提供的加密算法
2019/12/18 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python实现爬取并分析电商评论
2020/06/19 Python
python利用platform模块获取系统信息
2020/10/09 Python
python实现xml转json文件的示例代码
2020/12/30 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
GWT都有什么特性
2016/12/02 面试题
优秀员工个人的自我评价
2013/11/29 职场文书
护士节活动总结
2014/08/29 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
庆六一开幕词
2015/01/29 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
高老头读书笔记
2015/06/30 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
SQL CASE 表达式的具体使用
2022/03/21 SQL Server