当前位置:首页 > 日记 > 正文

jQuerylazyload延迟加载的详细解释

jQuerylazyload延迟加载的详细解释
延迟加载是一个由jQuery插件编写的Javascript。它可以延迟图片中的加载页面。在浏览器外部的图片区域将不会被加载,直到用户将滚动到他们所在的页面。这种图像处理和预加载模式正好相反。

在许多带有大图片的页面中,延迟图片加载可以加快页面加载速度。浏览器加载可见图片后将进入就绪状态。在某些情况下,它也有助于减轻服务器负担。
演示页:
基本选项
渐明
不支持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。

以上是本文的全部内容,希望本文的内容能给大家的学习或工作带来一定的帮助,同时也希望能给予更多的支持!

相关文章

Excel在Excel中限制单元格输入数据

Excel在Excel中限制单元格输入数据

输入,操作,数据类型,单元格,基础,当您在单元格中输入指定的数据类型和数值时,输入数据超出所需范围而不知道它。为了避免这种情况的发生,萧边教你限制单元格中输入的数据类型的操作技能在Excel。 限制Excel中单元格输入数据类型的操作步骤 …

DWCS6如何建立网站和管理网站

DWCS6如何建立网站和管理网站

网站,管理网站,电脑软件,站点通常包括本地站点(本地计算机上的一组文件)和远程站点(远程Web服务器上的一组文件)。 软件名称:Adobe Dreamweaver CS6正式的官方原始版本的原始版本(附激活补丁)软件大小:278.08mb更新时间:2014-05-14 1,在计算机中创…

Yii的配置与使用Memcached的缓存

Yii的配置与使用Memcached的缓存

缓存,配置,电脑软件,Yii,Memcached,本文阐述了Yii配置和使用memcached缓存的方法,分享给您参考,如下: 1。下载缓存软件包,解压,把memcached.exe在随机的地方,如:D: / /缓存。 2。开始->运行,输入cmd命令,打开memcached.exe文件夹,D,输入:memcached.exe…

PS图象处理软件产的红色窗帘的效果

PS图象处理软件产的红色窗帘的效果

红色,图象,处理软件,效果,电脑软件,今天要介绍的PS图象处理软件做一个红色的窗帘的效果方法的基础教程,适合初学者学习,推荐,喜欢的朋友可以参考这个,看! 1。在PS软件中,一个新的800×800文档在背景前面以黑白的形式构建,然后在过滤器中添加一个…

对ora-12170TNS连接超时解决方案的

对ora-12170TNS连接超时解决方案的

解决方案,方案,连接超时,详细,电脑软件,1。开始--程序----- Oracle ------配置和移植工具-----网经理----本地服务命名--- ora11(这是我的专用服务器),更改主机名称右侧的192.168.1.102。 2。开始--程序----- Oracle ------配置和移植工具---…

在Excel2010版中获取一组不重复数

在Excel2010版中获取一组不重复数

操作方法,重复数据,版中,电脑软件,在使用excel的过程中,经常需要过滤不重复的一组数据的值。今天,小编辑教你如何在Excel 2010版中获得一组非重新估价的数据。 在操作步骤中的Excel的2010版本获得一组不重复的数据。 在Excel中使用,经常需要…

PPT制作PPT效果如何制作PPT制作课

PPT制作PPT效果如何制作PPT制作课

绘图,效果,课程,电脑软件,PPT,我们可以在PPT中实现抽奖动画效果,制作方法也不是很复杂。让我们告诉萧边有PPT可以使抽奖活动的效果,希望能帮助你。 抽奖的PPT方法 用PPT制作彩票教程: 绘制效果1的PPT步骤图 绘制效果2的PPT步骤图 调整格式…

Javascript函数节流的概念及其用法的详细

Javascript函数节流的概念及其用法的详细

函数节流,详细说明,电脑软件,Javascript,本文介绍了Javascript函数节流的概念和用法,供大家参考,如下: 最近,在制作网页时有一个需求,也就是说,当改变浏览器窗口时,我们需要更改页面元素的大小,所以自然地考虑窗口的大小调整事件,所以这就是我写的。 节流…

AI只是从破壳里画一个小黄继。

AI只是从破壳里画一个小黄继。

是从,画一,小黄,破壳,电脑软件,今天我们分享一个AI简单孵出小鸡教程的方法,基础比较,适合初学者学习,大家看看吧! 步 在Ai软件中,新建了一个新的800×800文档,选择一个椭圆工具来绘制一个椭圆图,如图所示。 Then select the pen tool, tick out …

WPS如何设置选项按钮

WPS如何设置选项按钮

选项,如何设置,按钮,电脑软件,WPS,你知道如何在WPS文本中设置下拉框吗对于一个通常不使用WPS的朋友,也许你并不十分了解它。让我们告诉你萧边建立WPS下拉选项框的方式,并希望信息由萧边编写的可以帮助你。 WPS文本下拉框的设置方法 1。要建…

DetailedhowtouseAxioscrossdomain

DetailedhowtouseAxioscrossdomain

电脑软件,DetailedhowtouseAxioscrossdomainaccessdatainVue,在最近的一个项目需要使用可信,所以赶上这个Axios到底是什么。这是一个非常时髦的资源替代,官方网站说,Axios用于未来。 Vue公司资源难以维持。这Axios如何使用,互联网搜索了很多,基…

WPS文本工具栏是如何用中文设置的

WPS文本工具栏是如何用中文设置的

中文,文本,工具栏,设置,如何用,当我们使用WPS表格,可能不小心将英语工具栏,如果我们想中国的工具栏,我应该怎么做不用担心下次让萧边告诉你如何把一个WPS的中文文本工具栏设置。 将WPS文本工具栏设置为中文的方法 计算机上的WPS软件已卸载,WP…