jQuerylazyload延迟加载的详细解释
在许多带有大图片的页面中,延迟图片加载可以加快页面加载速度。浏览器加载可见图片后将进入就绪状态。在某些情况下,它也有助于减轻服务器负担。
演示页:
基本选项
渐明
不支持Javascript浏览器的降级处理
水平滚动
集装箱卧式轧制
集装箱垂直轧制
页面中有N个多幅图片。
延迟五秒后加载图片
用ajax加载图片
如何使用它
延迟加载依赖于jQuery,请在HTML结尾添加以下代码,即:
你要改变图片的标签。图像的地址必须放置在数据的原始属性,给懒散的形象,一个特定的类(例如:懒惰)。这样,你可以很容易地把图像plug-in.the代码如下:
$(函数(){())
$(img。懒惰)Lazyload();
});
这将使所有类图像都懒得被延迟。
演示:基本选项
提示:这里必须设置图片的宽度和高度,否则插件可能无法正常工作。
设置临界点
默认情况下,图片会出现在屏幕上。如果你想提前加载图片,你可以设置阈值选项,设置阈值为200,并使图片加载在屏幕的200像素前面。
$(img。懒惰)。Lazyload({
门槛:200
});
设置事件以触发加载
你可以使用jQuery事件,如单击鼠标悬停。你也可以使用一个自定义的事件,如运动foobar,默认是等待向下滚动的用户和图像出现在视口时,只有当他们的用户点击,图片加载。
$(img。懒惰)。Lazyload({
事件:单击
});
演示:在延迟五秒后加载图片
使用特殊效果
默认情况下,对于图像和调用满载插件等显示(),你可以使用任何你想要的效果。下面的代码使用FadeIn(淡入效果)。
演示效果:淡入
$(img。懒惰)。Lazyload({
效果:显露
});
在没有启用javascript的情况下
几乎所有浏览器的Javascript都被激活。但是,也许您仍然希望在不支持Javascript的客户机上显示真正的图片。当浏览器不支持Javascript,优雅降级时,您可以将真正的图片剪辑放入标记中。
你可以通过CSS隐藏占位符。
{。懒惰
显示:无;
}
在支持Javascript的浏览器中,必须在DOM中显示占位符,这可以在插件初始化时完成。
$(img。懒惰),Lazyload()();
照片在容器里。
你可以在可滚动的容器的图像使用的插件,如滚动div元素。您所要做的就是将容器定义为jQuery对象,并将其作为参数传递给初始化方法。
水平滚动演示:集装箱,垂直滚动集装箱
当图像不连续时
滚动页面时,延迟加载将循环加载图片。环路检测中的视觉区域。默认情况下,在图片的可见区域找到的第一个图像在考虑图片时不会停止循环。页面序列上的流分布、同一顺序和HTML代码。但在某些布局中,这种假设是不成立的。但你可以用failurelimit选项来控制加载行为。
$(img。懒惰)。Lazyload({
failure_limit:10
});
failurelimit设置到10,这样你就可以找到10的图像是不可见的可见区域。如果您有一个肮脏的布局,请设置参数一点点。
加载隐藏图片
可能在你的页面上可以埋藏很多隐藏的图片。如插件在列表上进行筛选,可以在显示状态下继续修改列表。为了提高懒惰的性能,默认负载忽略了隐藏的图片。如果你想加载隐藏图片,请设置skip_invisible假
$(img。懒惰)。Lazyload({
skip_invisible:假
});
下载插件
源代码和压缩代码的最新版本。插件已经在OSX的Safari 5.1,测试Safari 6,Chrome 20,Firefox 12浏览器,Windows Chrome 20,IE 8和IE 9浏览器,和iOS5(和伊江)浏览器5.1。
以上是本文的全部内容,希望本文的内容能给大家的学习或工作带来一定的帮助,同时也希望能给予更多的支持!