动态延迟加载网页元素jQuery插件scrollLoading

Posted 2020-09-03 归回老本行

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

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

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

    （jquery.scrollLoading.js文件下载见页面下方附件）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.scrollLoading.js"></script>

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

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

     看到如上形式，Kurly给大家简单说明一下。该插件的原理是首先给图片的src赋一个临时图片地址，这个图片可以是一个1像素的透明图片（建议设置宽和高），这样，所有需要运用动态加载效果的图片只有在滚动到相应的位置时，该图片的src才会替换成真实的图片地址。注意，我们还要给这些图片添加统一的class，如上是”scrollLoading“以便我们将要对其进行选择并实现我们需要的效果。

    从而，浏览器没有到达的区域中的图片都只是加载同一个1像素的图片而已。

    如果要给正在载入的图片一个载入的动态效果，我们可以给这个1像素的透明图片添加一个GIF动态载入的背景图片，那样会给人更好的体验。

    好了，上面已经加载了必要的两个JS文件，以及我们已经对需要动态加载的图片进行了处理。下面就是调用该插件实现该效果了，很简单，就一句话：

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