图片懒加载imgLazyLoading.js使用详解
时间:2019-04-12
本文章向大家介绍图片懒加载imgLazyLoading.js使用详解,主要包括图片懒加载imgLazyLoading.js使用详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文主要介绍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) { } // 加载图片失败后的回调函数(默认:不执行任何操作) }); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 剑指OFFER之第一个只出现一次的字符(九度OJ1283)
- c++中类长度解析
- 剑指OFFER之丑数(九度OJ1214)
- 剑指OFFER之把数组排成最小的数(九度OJ1504)
- 剑指OFFER之从1到n中出现1的次数(九度OJ1373)
- 剑指OFFER之最大子向量和(连续子数组的最大和)(九度OJ1372)
- 剑指OFFER之最小的K个数(九度OJ1371)
- 剑指OFFER之数组中出现次数超过一半的数字(九度OJ1370)
- 如何成为一名10x的数据分析师?
- 肥料生产商全套三拼在手:拟融资1.47亿元
- 《外媒Cointelegraph专访Qtum量子链Jordan Earls》—浅谈目前Dapps的主要问题
- ASP .Net Core 2.0 修改默认端口
- 不满一岁的潜力股:2017年3D打印机器人盘点
- Reporting Service报表开发
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux进程间的通信
- 如何使用jMeter对需要CSRF token验证的OData服务进行并发性能测试
- 如何让SAP C4C自定义BO实现附件上传的功能
- SAP C4C基于自定义BO开发的OWL UI,如何实现动态访问控制
- 使用ABAP CL_HTTP_CLIENT类消费OData服务时,如何避免CSRF令牌验证失败错误
- 使用ABAP代码消费SAP Cloud for Customer的OData服务
- 使用SAP C4C OData notification实现CRM和C4C的数据同步
- 在nodejs服务器和ABAP服务器上使用jsonp
- 如何在Android平台上创建自定义的Cordova插件并使用SAP UI5消费
- 使用SAP BSP应用运行Vue
- 微信开发系列之六 - 使用微信OAuth2 API读取微信用户信息,显示在SAP UI5里
- 微信开发系列之五 - 将SAP UI5应用嵌入到微信中
- 微信开发系列之四 - 将SAP C4C的数据更改通知发送到微信公众号上
- 微信开发系列之三 - 在微信公众号里发起SAP C4C Account的创建
- 微信开发系列之二 - 在微信公众号里开发一个自动应答的图灵机器人