某某茶叶有限公司欢迎您!
金沙棋牌在线 > 服务器&运维 > Jquery图片延迟加载插件jquery.lazyload.js的使用方法_jquery_脚本之家

Jquery图片延迟加载插件jquery.lazyload.js的使用方法_jquery_脚本之家

时间:2019-12-29 06:39

如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度。

最新版的jquery.lazyload.js已不再是伪的延迟加载了

Lazy Load 插件原理

一、请按照基本使用方法说明设置

修改目标img元素的src属性为orginal属性,从而中断图片的加载。检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果。代码引入方法:

复制代码 代码如下://载入JavaScript 文件

复制代码 代码如下:

复制代码 代码如下://img标签的4个属性一个都不能少,否则不能实现延迟加载的效果,如下:图片 1

但是现在,很多Javascript大牛分析得出,这个插件其实并没有真正的起到缓加载的作用。确实是这样,官方也已经给出了说明和解决方法了。

复制代码 代码如下://使用$ { $.lazyload;

其实原因就在于在新版的浏览器中,即使我们删除了Javascript控制的src属性,浏览器仍然会去加载这个图像。

二、常用属性说明

那么我们该怎么解决呢?其实也很简单,需要直接修改HTML的结构,在img标签中添加新的属性,把src属性的值指向占位图片,添加data-original属性,让其指向真正的图像地址。比如:

复制代码 代码如下:threshold : 200 //设置灵敏度,表示进入显示区域还有200像素就开始加载effect : "fadeIn" //使用淡入特效failure_limit : 10 //容差范围,一定要设置此值,原因说明请参考原文档

复制代码 代码如下:图片 2

container: $ //使用父容器,父容器的CSS样式至少应包含"height: 600px;overflow: scroll;"两个属性

当然,在上面的代码中我们把页面内的所有图片都延迟加载了,但有些时候我们并不希望这样,因为有些图片并不想然他们延迟加载,那么我们可以这样只需做:

event : "click" //修改触发事件为单击

如只缓冲加载类main下的图像

三、参考

复制代码 代码如下:$.lazyload({ placeholder : "images/grey.gif", effect : "fadeIn"});

英文参考:

加载挂载有lazy类的图像:

中文参考:

复制代码 代码如下:$.lazyload({ placeholder : "images/grey.gif", effect : "fadeIn"});

其他的以此类推,适当做一下选择器调整就行了。

lazyload.js 高级使用方法:

下面部分来自官方文档,将官方文档进行了一下简单的翻译。

更周全的做法

我们不得不思考这样一个问题。我们定义了这样一个结构,那么网页中,就不会加载源图像了。只有当 Javascript 执行,才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项,那么我们的这个图像就无法显示出来。也就是说,如果没有 Javascript 的支持,我们的图像就无法显示出来。

应对这个问题,我们需要引入noscript 标签。大体思路如下:用 noscript 包含真实的图像位置,当浏览器不支持 Javascript,直接显示图像。

复制代码 代码如下:图片 3

图片 4