jquery.scrollLoading.js - jQuery页面滚动图片等元素动态加载实现
  • 分享到微信朋友圈
    X
立即下载 查看演示

关于scrollLoading.js

scrollLoading.js jQuery页面滚动图片等元素动态加载实现 就是一个懒加载的插件， 当一个页面图片数量多，而且比较大，少说百来K，多则上兆的时候。要是页面载入就一次性加载完毕。 就会非常慢。所以，我们得做点什么，避免这种糟糕的状况发生。 目前很流行的做法就是滚动动态加载，显示屏幕之外的图片默认是不加载的，随着页面的滚动， 这个要显示图片的区域进入了浏览器可是窗口范围，则触发图片的加载显示。 这种做法的好处是，一是页面加载速度快，二是节约了流量，因为不可能每个用户浏览页面时从头滚到尾的。

如何使用

首先调用jQuery库文件，还有jquery.scrollLoading.js

步骤 1： 将 jquery.js，jquery.scrollLoading.js 添加到您的页面：

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

步骤 2： 写入html

在HTML5中，以data-开头的自定义属性都是合法的，且地址可以是图片，页面等。所以，设定了绑定地址的自定义属性为”data-url”，此属性值设为真实的图片（或页面）地址就可以了。例如下面：

pixel.gif是一个非常小的图片,也data-url 图片不存在的时候 默认会显示pixel.gif

<img class="scrollLoading" data-url="image/1.jpg" src="image/pixel.gif" />

步骤 3： 调用scrollLoading

此插件的方法名就是scrollLoading，所以，直接：包装器.scrollLoading();就可以实现滚动加载效果了，简单的吧。如下：

$(".scrollLoading").scrollLoading();

参数说明

  • attr data-url 获取元素加载地址的属性名

  • container $(window) 滚动的容器。默认为$(window)，也就是默认的网页滚动。

  • callback $.noop 回调。元素动态加载完毕后执行的回调函数。其中回调函数的上下文this就是当前DOM元素。注意：如果无法获取元素加载地址，则不执行动态加载，但是会触发回调。在某些需求下，您可以缺省url值，仅仅触发回调。