jquery插件lazyload.js延迟加载图片的使用方法

  次阅读 作者:智能小宝 来源:互联网 2016-01-28 12:59 我要评论(0)

lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片。下面介绍这个插件的使用方法

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

Lazy Load 插件原理

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

代码如下:

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="js/jquery.lazyload.js"></script>

<script type="text/javascript">

$(document).ready(

function($){

$("img").lazyload({

placeholder : "images/grey.gif", //加载图片前的占位图片

effect: "fadeIn" //加载图片使用的效果(淡入)

});

});

</script>

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

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

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

代码如下:

<img src="img/grey.gif" data-original="img/example.jpg" >

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

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

代码如下:

$(".main img").lazyload({

placeholder : "images/grey.gif",

effect: "fadeIn"

});

加载挂载有lazy类的图像:

代码如下:

$("img.lazy").lazyload({

placeholder : "images/grey.gif",

effect: "fadeIn"

});

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

lazyload.js 高级使用方法:

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

更周全的做法

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

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

代码如下:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"width="640" heigh="480">

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...