当前位置:  首页  >  PHP教程  >  PHP 安全  >  跨站攻击

jQuery插件lazyLoad.js实现网页图片延迟加载

当我们的网页中有很多图片需要加载的时候,如果要等网页加载完成再打开,这样网页打开的速度会很慢,并且对于一个很大的网页,很多的内容也许用户是不关心的,这个时候,我们还把所有的图片加载出来,不仅浪费时间

 当我们的网页中有很多图片需要加载的时候,如果要等网页加载完成再打开,这样网页打开的速度会很慢,并且对于一个很大的网页,很多的内容也许用户是不关心的,这个时候,我们还把所有的图片加载出来,不仅浪费时间,而且还浪费服务器的资源,理想的解决方法就是 看一 点,加载一点。目前,图片的延迟加载,可以使用 jQuery的 lazyLoad .js 插件来实现。

1. LazyLoad 插件介绍:

 Lazy Load 是一个jQuery 插件,主要是用来延迟加载图片的。比如一篇文章很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台请求下载图片,然后显示出来。使用这个插件,可以在需要显示图片的时候,才下载图片,所以可以减少服务器的压力,避免不必要的资源下载。 如果一个人不看下面的图片,那加载下面的图片就是一种浪费。

2. Lazy Load 插件原理

修改目标 img 的 src 属性为 orginal 属性,从而中断图片的加载。检测滚动状态,然后把可视网页中的 img 的 src 属性还原加载图片,制造缓冲加载的效果。

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

问题原因:在新版的浏览器中,即使你删除了 Javascript 控制的 src 属性,浏览器仍然会去加载这个图像。

解决方法:直接修改 HTML 的结构,在 img 标签中添加新的属性,把 src 属性的值指向占位图片,添加 data-original 属性,让其指向真正的图像地址。


例如:


这样我们就需要先分析一下插件的优缺点,再决定是否要使用。

使用 lazyLoad 插件:

  1. 必须按照这种结构才有实际作用,需要对输出进行定义。
  2. 可以节约服务器资源,并且有较好的用户体验。
  3. 如果图片很大,当用户滚动到目标位置,需要较长时间下载。

不使用 lazyLoad插件:

  1. 增加服务器压力,浪费系统资源。

究竟使用不使用,还是要看你自己的实际需求。如果你图片比较少,就不必使用了,如果你图片比较多,可以考虑一下。但是,使用的话,你可能需要把每一 个img 标签上自己加上这个属性,会稍微麻烦一点。潜行者m博客上,就用了这个插件,不过没用使用官方说的那种结构,要的只是一个缓冲加载的效果。

 3. lazyload 插件的使用

第一步:加载相关文件。

很明显,因为lazyload 是jQuery插件,所以,首先我们要加载jquery和这个插件。你可以使用以下代码,加载这几个文件:

RankList | 热门文章
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有