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

Share on:

有很多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值,就是选择器要选择正确就是了。留意红体字。

options: {
  range: 200,
  elements: ".goodsImg img",
  container: window,
  mode: "vertical",
  realSrcAttribute: "data-src",
  useFade: true
},
闽ICP备12003472号-7