电子商务网站中长网页图片延迟加载方法

电子商务网站中长网页图片延迟加载方法

 

在电子商务网站的制做过程当中，感觉到了其功能的强大和模板制做的灵活，如今总结一下本身在制做模板过程当中处理长网页中大量图片的延迟加载的方法，与你们分享。

在网站中有些场景是须要呈现大量图片的、网页也很长，在这种状况下就要使用图片延迟加载方法，不然就会由于图片量大的缘由而出现网页迟迟不能显示，用户体验差，没有耐心的用户会关掉该网页，下面针对这个场景介绍处理方法。

1、图像延迟加载jquery插件介绍

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件。它能够延迟加载长页面中的图片，在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置。在图片量较大的长页面中延迟加载图片能够加快页面加载速度，浏览器将会在加载可见图片以后即开始显示网页，减小用户等待时间，用户体验很好。在幸福生活网（http://www.happy36524.com）及其子站正品旗舰店导航(http://qjd.happy36524.com)中就使用了该插件，效果很是好，感兴趣的朋友能够访问体验一下效果。

2、在模板制做中使用Lazy Load

1. Lazy Load 依赖于 jQuery. 请将下列代码加入模板页面 head 区域:

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

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

其中jquery.js及jquery.lazyload.js都是开源软件，均可以从其官方网站上下载最新版本，能够百度一下就能找到。

 2.准备一个1x1像素的图片文件

 制做只有一个像素的的图片文件，只是一个点，我在制做的时候使用了1像素的黑点文件b.png,在Lazy Load官方网站上使用的是一个grey.gif文件，也是一个1x1像素的图片文件，它用来做为在浏览器没有将其显示以前的占位符。

3.修改模板网页中图像标签

怎么改呢？在图片的img的 src属性中设置占位符图片,而且须要将真实图片的URL设置到data-original属性，这里能够定义特定的class以得到须要延迟加载的图片对象，经过这种方法你能够简单地控制插件绑定。

<img class="lazy" src="img/b.png" data-original="img/example.jpg"  width="200" heigh="180">

4. 加入javascript代码，使插件可以处理延迟加载的图片

处理图片的代码以下.

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

这将使全部class为lazy的图片将被延迟加载。

3、使用效果

将模板修改完成后保存，生成首页和栏目页，浏览生成的网页就会出现延迟加载图片的效果，随着滚动条的下拉，图片逐步加载，页面速度加载特别快，在大的电子商务网站中大都使用了该技术，若是有须要的朋友能够试试，也能够访问我制做的网站看看效果。