基于mootools的SHOPEX图片延迟加载挂件

有很多SHOPEX朋友发过图片延迟加载的挂件,基本都是基于jquery写的,但是SHOPEX是基于mootools开发UI的,所以在shopex下使用基于jquery写的挂件就会出现不兼容mootools、重复加载js代码这些令人烦恼的问题。

在这里也简单说一下延迟加载的原理。就是把图片src属性改成data-src,在滚动到当前区域时通过Js改变src值为data-src值。从而达到图片延迟请求,滚到哪请求到哪的效果。

网络上一搜发现外国牛人已经写好了基于mootools延迟加载挂件---lazyload,感动得都快哭了。

应用在shopex只需要小小的改动下需要延迟加载产品图片的img即可。

下面我就具体说说如何操作吧。

首先在head中引入lazyload这个插件,具体方法看lazyload介绍页,很简单的。

这里需要说明下下载的MooTools Javascript Class中有个elements的值需要改变自己shopex中的值,这个值如何取是根据的是shopex需要延迟加载图片div的class或者id值,就是选择器要选择正确就是了。留意红体字。

SHOPEX中需要延迟加载图片附近代码:

lazyload代码片段:
options: {
    range: 200,
    elements: ".goodsImg img",
    container: window,
    mode: "vertical",
    realSrcAttribute: "data-src",
    useFade: true
  },

 然后就是修改<img width="185" height="185" title="竹纤维洗碗布(硬)" src="images/goods/20120109/1a1b7031b81f8e6b.jpg">img width="185" height="185" title="竹纤维洗碗布(硬)" data-src="images/goods/20120109/1a1b7031b81f8e6b.jpg">

 

到了这里基于mootools的SHOPEX图片延迟加载挂件就安装结束了,shopex系统浏览速度就有了很大的提高了。

 

发表评论

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