坐峰怀雪灬

路漫漫其修远兮,吾将上下而求索。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

   如果一个网页很长,那么该页面的加载时间也会相应的较长。而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的就不用加载了。这样还可以在一定程度上节省服务器资源。该插件作者的网页将该插件的功能和使用方法描述的非常详细,这里把最一般最普遍的使用情况给大家展现一下。

    插件作者:http://www.zhangxinxu.com/

    首先我们需要加载jQuery库和本插件js文件。

    (jquery.scrollLoading.js文件下载见页面下方附件)

1 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
2 <script type="text/javascript" src="./js/jquery.scrollLoading.js"></script>

 

     接下来我们对自己想要运用该效果的图片进行一下简单的形式处理。

1 <img class="scrollLoading" data-url="真实的图片地址" src="临时图片地址" width="120" height="90"/>

  看到如上形式,给大家简单说明一下。该插件的原理是首先给图片的src赋一个临时图片地址,这个图片可以是一个1像素的透明图片(建议设置宽和高),这样,所有需要运用动态加载效果的图片只有在滚动到相应的位置时,该图片的src才会替换成真实的图片地址。注意,我们还要给这些图片添加统一的class,如上是”scrollLoading“以便我们将要对其进行选择并实现我们需要的效果。从而,浏览器没有到达的区域中的图片都只是加载同一个1像素的图片而已。如果要给正在载入的图片一个载入的动态效果,我们可以给这个1像素的透明图片添加一个GIF动态载入的背景图片,那样会给人更好的体验。 好了,上面已经加载了必要的两个JS文件,以及我们已经对需要动态加载的图片进行了处理。此插件的方法名就是scrollLoading,所以,直接:包装器.scrollLoading();就可以实现滚动加载效果了。如下:

1 <script type="text/javascript">
2      $(".scrollLoading").scrollLoading();
3 </script>

表示所有class为scrollLoading的元素绑定了滚动加载的方法。

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

1  <img class="scrollLoading" data-url="image/mm/00_00.jpg" src="image/pixel.gif" width="630" height="420" style="background:url(image/loading.gif) no-repeat center;" />

会在滚动时加载名为data-url的图片路径。对于常用的图片,还有一点小问题,就是其默认的src图片地址。其src地址不能是真实的图片地址(否则会直接一次性全部加载),也不能是空地址或是坏地址,否则IE浏览器下会出现很惊悚的红叉叉。我的做法是默认链接的是一个1px * 1px的gif透明图片(大小很小),同时可以透出后面加载中gif动画图片,当滚动加载的时候直接把此gif图片替换掉。

scrollLoading是个很简单很小的插件,见下表:

参数默认释义
attr data-url 获取元素加载地址的属性名

就这些了。此插件只适用于页面默认滚动条的动态加载。对于内部div之类的滚动加载不支持。根据部分要求,现增加两个可选参数,一个为container表示容器,另一个为callback表示回调。具体参见下表:

参数默认释义
attr data-url 获取元素加载地址的属性名
container $(window) 滚动的容器。默认为$(window),也就是默认的网页滚动。
callback $.noop 回调。元素动态加载完毕后执行的回调函数。其中回调函数的上下文this就是当前DOM元素。注意:如果无法获取元素加载地址,则不执行动态加载,但是会触发回调。在某些需求下,您可以缺省url值,仅仅触发回调。

使用方法如下:

1 $(".scrollLoading").scrollLoading({
2     container: $("#zxxMainCon"),
3     callback: function() {
4         this.style.border = "3px solid #a0b3d6";    
5     }
6 });

附件下载:下载