如果一个网页很长,那么该页面的加载时间也会相应的较长。而这里给大家介绍的这个 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>
来源: http://www.bubuko.com/infodetail-1978007.html