<ul>
                    <li><a href="http://news.qq.com/" target="_blank" name="xinwen" title="腾讯新闻">
                        <img class="scrollLoading" data-url="images/col_1.png" src="data:images/loading.gif" width="108"
                            height="86" border="0" />
                    </a>&nbsp; </li>
                    <li><a href="http://news.163.com/" target="_blank" name="xinwen" title="网易新闻">
                        <img class="scrollLoading" data-url="images/col_2.png" src="data:images/loading.gif" width="108"
                            height="86" border="0" /></a> </li>
                    <li><a href="http://www.people.com.cn/" target="_blank" name="xinwen" title="人民网">
                        <img class="scrollLoading" data-url="images/col_3.png" src="data:images/loading.gif" width="108"
                            height="86" border="0" /></a> </li>
                    <li><a href="http://www.chinabyte.com/" target="_blank" name="xinwen" title="比特网">
                        <img class="scrollLoading" data-url="images/col_4.png" src="data:images/loading.gif" width="108"
                            height="86" border="0" /></a> </li>
                    <li><a href="http://www.cntv.cn/" target="_blank" name="xinwen" title="央视网">
                        <img class="scrollLoading" data-url="images/col_5.png" src="data:images/loading.gif" width="108"
                            height="86" border="0" /></a> </li>
</ul> js调用  <script type="text/javascript">
        $(function () {
            $(".scrollLoading").scrollLoading();
        });
    </script>说明:1.需要引入jq 2.引用 <script src="js/jquery.scrollLoading.js" type="text/javascript"></script>3.src为图片加载时候的lodging的图片 ,data-url中的路径才是真正的图片路径!,具体原来请百度! 效果图:pasting

图片延迟加载scrollLoading.js应用的更多相关文章

  1. 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js

    估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...

  2. 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载

    jquery.scrollLoading方法 html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  3. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  4. js图片延迟加载

    什么是图片延迟加载? 也叫懒加载. 当页面有多屏的时候,页面中的图片比较多. 那么,在页面载入完毕的时候,并不会把所有的图片都加载进来. 而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载 ...

  5. 前端优化之图片延迟加载(lazyload.js)

    要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...

  6. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  7. JS实现移动端图片延迟加载

    图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...

  8. JS图片延迟加载分析及简单的demo

    JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...

  9. jquery.lazyload.js图片延迟加载

    转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下   ...

随机推荐

  1. C(m,n)%P

    program1 n!%P(P为质数) 我们发现n! mod P的计算过程是以P为周期的的,举例如下: n = 10, P = 3 n! = 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 ...

  2. Java中的ThreadLocal深入理解

    提到ThreadLocal,有些Android或者Java程序员可能有所陌生,可能会提出种种问题,它是做什么的,是不是和线程有关,怎么使用呢?等等问题,本文将总结一下我对ThreadLocal的理解和 ...

  3. c语言 (linux下)

    生成二进制 : gcc -o hello hello.c 生成汇编:gcc -o hello.s -S hello.c 生成预编译文件:gcc -o hello.i -E hello.c int ma ...

  4. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  5. Django之Cookie与Session

    一.cookie 1.cookie使用 def cookie(request): print(request.COOKIES) # 获取所有的COOKIES obj = render(request, ...

  6. IOS Layer的使用

    CALayer(层)是屏幕上的一个矩形区域,在每一个UIView中都包含一个根CALayer,在UIView上的所有视觉效果都是在这个Layer上进行的. CALayer外形特征主要包括: 1.层的大 ...

  7. traceroute原理

    traceroute原理 ICMP ICMP全称为Internet Control Message Protocol,即,网络控制报文协议. 当一个IP数据报发送失败时,最后一个路由器会向发送发传递一 ...

  8. IOS 原生解析JSON 问题

    服务器----WebService 返回的是JSON数据 IOS解析报错: Error Domain=NSCocoaErrorDomain Code=3840 "Unable to conv ...

  9. python - 面向对象(二)

    类的三大特性 类的三大特性包括: 封装.继承.多态 一.封装 封装就是将类所用到的所有字段.属性.方法都包含在类代码段里面,当实例调用直接调用类中的方法即可. class People(object) ...

  10. Linux 统计代码行数命令

    wc -l `find . -name '*.js'` wc -l `find . -regex ".*\.js"`