zoukankan      html  css  js  c++  java
  • 动态延迟加载网页元素jQuery插件scrollLoading

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

      

  • 相关阅读:
    html、css、js文件加载顺序及执行情况
    python之路_前端基础之jQuery入门3
    python之路_前端基础之jQuery入门2
    python之路_前端基础之jQuery入门1
    python之路_前端基础之JS5
    python之路_前端基础之JS4
    python之路_前端基础之CSS布局3
    python之路_前端基础之JS(3)
    python之路_前端基础之JS(2)
    python之路_前端基础之JS(1)
  • 原文地址:https://www.cnblogs.com/keta/p/6534739.html
Copyright © 2011-2022 走看看