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%;},文档高度和窗口高度一致就无法触发窗口滚动事件。
jQuery lazyload插件详解和问题解答的更多相关文章
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- jQuery Form插件详解
<script src="js/jquery.form.js" type="text/javascript"></script> Jqu ...
- 用jQuery开发插件详解
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
- Uploadify 上传文件插件详解
Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...
- jQuery 事件用法详解
jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...
- jQuery extend方法详解
先说个概念的东西: jQuery为开发插件提拱了两个方法,分别是: $.fn.extend(item):为每一个实例添加一个实例方法item.($("#btn1") 会生成一个 j ...
- 【转载】jQuery.extend 函数详解
转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...
- jquery的css详解(二)
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- jQuery.attr() 函数详解
一,jQuery.attr() 函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...
随机推荐
- 基于Python实现对PDF文件的OCR识别
http://www.jb51.net/article/89955.htm https://pythontips.com/2016/02/25/ocr-on-pdf-files-using-pytho ...
- 9月22日上午JavaScript----window对象
window对象 window属性: opener:打开当前窗口的源窗口,如果这个窗口是由别的网页点击链接跳转过来的,或者是从另外一个页面点击打开窗口打开的,opener就是找到源页面的.如果当前窗口 ...
- HTML5学习预览
HTML5中,新增了很多input元素的类型 email email类型用于应该包含 e-mail 地址的输入域. url url 类型用于应该包含 URL 地址的输入 ...
- Http请求之--C#的HttpWebRequest实现POST方式请求
1.添加头信息和请求方法.有两种方式添加 req = (HttpWebRequest)WebRequest.Create("http://zhidao.baidu.c ...
- 简单CSS布局留用
1.导航栏固定显示代码,文字居中,z-index header{ position: fixed; top: 0px; left: 10%; width: 80%; height: 80px; bor ...
- nginx配置图片防盗链
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${ expires 30d; access_log off; valid_referers none blocked ...
- How to save milliseconds to DB in NHibernate
We need to configure Timestamp in Mapping. eg. Map(x => x.ResponseDate).CustomType("Timestam ...
- WebGrid Helper with Check All Checkboxes
WebGrid Helper with Check All Checkboxes myEvernote Link Tuesday, September 13, 2011ASP.NET ASP.NET ...
- MySQL中MAX函数与Group By一起使用的注意事项(转)
mysql> select * from test; +----+-------+------+-------+ | id | name | age | class | +----+------ ...
- linuxMint install shuruma
http://my.oschina.net/u/1446273/blog/306053 http://blog.sina.com.cn/s/blog_5d406a1b0101jlgn.html htt ...