jQuery lazyload插件详解和问题解答

lazyload插件用于图片延迟加载，节省服务器带宽，减少服务器请求次数，提高网站的页面加载速度，用于网站性能优化，只有当图片在窗口可视范围内时才向服务器请求；

参数：

threshold：设置距离窗口底部多少像素开始加载图片，提前加载图片，

failure_limit：lazyload按照瀑布流加载图片，当找到（按照图片在DOM中的位置从上往下）第一张不在可视范围的图片后就停止检测延迟加载图片的位置

如上图，如果每个列表块包含两张图片，failure_limit为0时，当页面滚动到阴影位置时，只会加载第一张图片，因为大图下的头像没有加载，所以会停止加载第二行第二列的图片。所以failure_limit应该设置为一行总显示图片的个数-1,

event：处理图片延迟加载的事件，默认的是window滚动事件，

effect：图片加载效果，

container：处理图片延迟加载的容器，用于触发绑定事件用，

data_attribute：图片延迟加载的图片地址属性后缀，data为前缀，默认为data-original

skip_invisible：用于显示隐藏的图片

appear：用于在图片加载之前到显示图片之间的处理函数，一般用于展示加载动画，

load：用于图片加载完毕之后执行的函数，

placeholder：用于显示图片之前的图片占位符，需要知道图片有宽度和高度

标注：浏览器窗口滚动事件的触发需要窗口的高度(window.innerHeight或$(window).height())和文档高度(document.body.clientHeight或$(document).height())相等才能触发滚动事件，但是如果设置html,body{height:100%;}，文档高度和窗口高度一致就无法触发窗口滚动事件。

转载于:https://www.cnblogs.com/zhang-jian/p/4569244.html

jQuery lazyload插件详解和问题解答相关推荐

JQuery自定义插件详解之Banner图滚动插件
前言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
jquery.lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
[zz]jQuery.extend 函数详解
JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩 ...
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
原文:http://www.codeceo.com/article/jquery-plugin-develop.html 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我 ...
Logstash（二）input、codec插件详解
input input 插件指定数据输入源,一个pipeline可以有多个input插件,我们主要讲解下面的几个input插件: - stdin- file- kafka Input Plugin – ...
jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档中对数组的 ...
我的世界服务器物品绑定插件,我的世界灵魂绑定插件详解
我的世界灵魂绑定插件详解.那下面给大家分享的是关于灵魂插件的用途详细介绍,还有关于我的世界服务器防止熊孩子盗窃插件用途介绍哦~希望对大家有所帮助. 游戏园我的世界官方群:325049520(已满)二群 ...
Snort日志输出插件详解
Snort日志输出插件详解 Snort是一款老×××的开源***检测工具,本文主要讨论他作为日志分析时的各种插件的应用.Snort的日志一般位于:/var/log/snort/目录下.可以通过修改配置 ...
jquery.lazyload 插件实现图片延迟加载
jquery.lazyload 插件实现图片延迟加载看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用 JQuery. ...

jQuery lazyload插件详解和问题解答

jQuery lazyload插件详解和问题解答相关推荐

最新文章

热门文章