页面滚动图片等元素动态加载插件jquery.scrollLoading.js

Posted 2020-10-01 柒月流火灬

 　　如果一个网页很长，那么该页面的加载时间也会相应的较长。而这里给大家介绍的这个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 });

附件下载：下载