<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. bzoj 1193

    http://www.lydsy.com/JudgeOnline/problem.php?id=1193 大范围贪心,小范围宽搜. 膜拜大神 http://blog.csdn.net/u0129155 ...

  2. bzoj1756 Vijos1083 小白逛公园

    Description 小新经常陪小白去公园玩,也就是所谓的遛狗啦-在小新家附近有一条"公园路",路的一边从南到北依次排着n个公园,小白早就看花了眼,自己也不清楚该去哪些公园玩了. ...

  3. 深入super,看Python如何解决钻石继承难题

    1.   Python的继承以及调用父类成员 python子类调用父类成员有2种方法,分别是普通方法和super方法 假设Base是基类 class Base(object): def __init_ ...

  4. 全球扫货指南:面向中国消费者的全球奢侈品旅游导购服务 |PingWest中文网

    全球扫货指南:面向中国消费者的全球奢侈品旅游导购服务 |PingWest中文网 用"全球扫货指南

  5. 人人必知的10个jQuery小技巧

    收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Back t ...

  6. android layout属性介绍

    android:id 为控件指定对应的ID android:text 指定控件其中显示的文字,须要注意的是,这里尽量使用strings.xml文件其中的字符串 android:gravity 指定Vi ...

  7. IT English Collection(9) of Objective-C

    1 前言 今天我们来解除一篇有关Objective-C的介绍文章,详情如下. 2 详述 2.1 原文 Objective-C defines a small but powerful set of e ...

  8. mysql连接提示1030

    今天上午,开发使用工具连上mysql,连接一个库,就提示 mysql 错误 ERROR 1030 Got error 28 from. 查询资料,说可能是磁盘空间不足.果然连上去一看/分区空间只有数十 ...

  9. 超长英文(代码)自动换行的样式(CSS)

    如何想让一连串文字在显示可以自动换行,而不会把在代码中使用的容器撑开,则在文章的CSS样式处加上以下代码即可: table-layout: fixed; word-wrap:break-word;或者 ...

  10. VS2015 新Web项目(C#6)出现CS1617异常的解决

    VS2015 新Web项目(C#6)出现CS1617错误的解决 VS2015新增了对C#6的支持. 在新的Web项目模板中通过引入nuget包Microsoft.CodeDom.Providers.D ...