当前位置:首页 » jQuery » jQuery lazyload插件实现图片延时加载 » 正文


jQuery lazyload插件实现图片延时加载

发布日期:2015-05-30 18:50   来源:谭海波   本文永久链接
摘要:今天跟大家分享一下使用jQuery lazyload插件如何实现网页图片的延时加载,其实实施起来相当的简单。 可能有的朋友还不知道延时加载是一个什么概念,那么我在这里就普及下吧。所谓延时加载图片就是当鼠标滚动到图片位置的时候,图片才开始加载,否则不加……

今天跟大家分享一下使用jQuery lazyload插件如何实现网页图片的延时加载,其实实施起来相当的简单。

可能有的朋友还不知道延时加载是一个什么概念,那么我在这里就普及下吧。所谓延时加载图片就是当鼠标滚动到图片位置的时候,图片才开始加载,否则不加载。这样做的好处第一,节省服务器资源,减少服务器压力,大大的提升了网页性能,第二就是从外观特效来说,也是对提升用户体验有大大的帮助。

关于图片延时加载的特效,大家可以去Web开发者中心参考下。特效链接:http://tanhaibo.net/wdc/jquery/case/2.html

好了,现在我就具体说说如何实现图片延时加载的功能。

首先,下载所需的插件等相关资源:jQuery插件、jQuery lazyload插件以及插件自带的grey.gif文件。大家分别点击下面的三个链接即可下载这三个资源:

http://tanhaibo.net/wdc/src/script/sys/jquery/jquery-2.1.4.min.js

/wdc/src/script/plugin/jqplugin/jquery.Lazyload.min.js

http://tanhaibo.net/wdc/src/image/demo/lazyload/grey.gif

然后,在网页的头部分别引用jQuery插件和jQuery lazyload插件。

最后,在网页的任意地方加上下面的代码,即可实现图片的延时加载功能。、

说明一下,代码中的img.test是我设置了只让class为test的图片参与了延时加载,接触过jQuery的朋友就知道jQuery选择器是怎么回事了。

好了,今天就分享到这里吧,是不是很简单,大家也去试试去吧。



关注谭海波博客官方微信公众平台
文章分类jQuery
文章标签:
本文永久链接:http://tanhaibo.net/2015/05/jquery-lazyload.html
转载提示:除非注明,谭海波博客的文章均为原创,转载请以链接形式注明作者和出处。谢谢合作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注