论坛里有很多朋友发过图片延迟加载的,基本都是用jquery的,但是其实那个js只是实现一种图片过渡的效果,也就是大家看到的先是一个灰色的遮罩图片,然后才出来真实图片,但是其实这个js并没有实现真正的图片延迟加载。
所谓图片延迟加载应该是指:滚动到指定区域,才请求该区域图片。注意是请求,而不是过渡效果。
之前jquery的与我今天所发的区别在于
1、那个基于jquery的,即使使用了,图片也是一次性全部请求的。根本无法解决首页图片加载多的问题。它只是一种效果,一种过渡的效果
2、基于mootools的这个,是滚动到那里才真正请求图片。也就是说首页加载时,所请求的图片也只是整屏可见区域的图片,不会请求整屏之外的,也就是需要滚动或者下拉才能看到的页面部分的图片。这样才会大大减少页面请求时的加载项,加快页面的加载速度。
区别这2种效果,有2个办法
1、IE浏览器下,注意拖动滚动条时,左侧下面的状态栏会显示正在请求的图片。我们以360的产列表页为例子。http://www.360buy.com/products/652-653-655-0-0-0-0-0-0-0-1-1-3.html
2、如果有使用过火狐的firebug工具的朋友,可以看得更清晰。在滚动到的区域才会发起对图片的请求,而jquery那种是不会请求的。
shopex下的效果
[485/易开店]《《485插件包》》几乎包揽现在所有免费插件!送大家免费下载!
简单说一下延迟加载的原理。就是图片src属性改成init_src,在滚动到当前区域时通过Js改变src值为init_src值。从而达到图片延迟请求,滚到那请求那的效果。有兴趣的可以深入研究一下。所以实现此效果,得配合首页使用的挂件使用,基本常用goods,goods_show商品挂件展示商品。
好了。附上首页的常用的2个显示商品的挂件goods,goods_show,还有这个延迟加载所需的js文件
共3个文件夹。大家备份好自己原先的
plugins/widgets/goods
plugins/widgets/goods_show
core/shop/view/common/header.html
用附件里的直接上传覆盖,清空缓存,即可看到真正延迟加载的效果