这个js库属于延迟加载(分屏加载)的一种,比lazyload小巧许多,最重要的是兼容性也很好。

首先需要jQuery库的支持,使用前务必挂载。

然后是引用 jquery.scrollLoading.js

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

它和lazyload类似,需要在img使用一个data-url参数来储存图片的真实地址,src来储存显示前的替换地址。格式如下:

<img class="scrollLoading" data-url="real.jpg" src="before_show.jpg" alt="xxx" />

可以看到上面还有一个名为 scrollLoading 的class选择器,这个选择器用于绑定scrollLoading的执行函数。

js执行代码很简单:

$('scrollLoading').scrollLoading();

Demo下载