<!--引入以下两个js文件-->

 <script type="text/javascript" src="./js/jquery.min.js"> </script>

 <script type="text/javascript" src="./js/jquery.lazyload.js"> </script>

 <!--初始化-->

 <script>

 $(function(){

         // 在灰色占位图片被点击之前阻止加载图片

     $("img.lazy").lazyload({

        placeholder : "img/grey.gif",

        event : "click"

    });

     $("ul img").lazyload({

         placeholder :"vsli1.gif",

         //当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理

         effect : "fadeIn",

         threshold : 10

     }); 

});

 </script>

<body>

<img class="lazy" src="./image/1.jpg"  width="100" heigh="100" />

<ul>

       <li><img src="./image/1.jpg" ></li>

       <li><img src="./image/11.jpg" ></li>

       <li><img src="./image/1.jpg" ></li>

       <li><img src="./image/11.jpg" ></li>

       <li><img src="./image/1.jpg" ></li>

       <li><img src="./image/11.jpg" ></li>

       <li><img src="./image/1.jpg" ></li>

       <li><img src="./image/11.jpg" ></li>

       <li><img src="./images/1.jpg" ></li>

       <li><img src="./images/11.jpg" ></li>

        <li><img src="./image/1.jpg" ></li>

       <li><img src="./image/11.jpg" ></li>

       <li><img src="./image/1.jpg" ></li>

       <li><img src="./image/11.jpg" ></li>

       <li><img src="./image/1.jpg" ></li>

       <li><img src="./image/11.jpg" ></li>

       <li><img src="./image/1.jpg" ></li>

       <li><img src="./image/11.jpg" ></li>

       <li><img src="./images/1.jpg" ></li>

       <li><img src="./images/11.jpg" ></li>

</ul>

</body>

jquery 延迟加载代码的更多相关文章

  1. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  2. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  3. jquery常用代码集锦

    1. 如何修改jquery默认编码(例如默认GB2312改成 UTF-8 ) 1 2 3 4 5 $.ajaxSetup({     ajaxSettings : {         contentT ...

  4. jQuery概述,代码举例及最新版下载

    jQuery是一个快速的,小巧的,具有强大功能的JavaScript库. 它的基本功能包括: 1)访问和操作DOM元素 2)控制页面样式(可以兼容各种浏览器) 3)对页面事件的处理 4)大量插件在页面 ...

  5. 电商网站jQuery放大镜代码

    分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线 ...

  6. jquery倒计时代码

    jquery倒计时代码<pre> <span id="day_show">0天</span> <strong id="hour_ ...

  7. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  8. jQuery延迟加载插件(Lazy Load)详解

    最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...

  9. jquery延迟加载（懒加载）插件

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. DataTable ，XML和JSON相互转化

    网上搜集的,保留下来了,有需要的拿去!private string DataTable2Xml(DataTable dt) { StringBuilder xmlBuilder = new Strin ...

  2. 各种不会。。。。编译和安装hadoop过程中好多命令和工具不会

    http://blog.csdn.net/bamuta/article/details/13506893  64位下解决方法(重新编译~~) http://zhidao.baidu.com/link? ...

  3. semantic versioning语义化版本号

    语义化版本号 是由github创始人 Tom Preston-Werner 发起的一个关于软件版本号的命名规范,关于这个规范详细的说明可以在 官网 查看,也可访问其 GitHub项目页面 ,官网文档: ...

  4. python学习笔记五－－文件

    任何情况下文本文件在Python里均是字符串模式. 一.创建一个文件,并写入: 函数open(文件名,w) 二.打开一个文件,并读取: 函数open(文件名,r),“r”是默认值,可以不用写 三.使用 ...

  5. 【原创】基于ZYNQ7000的交叉编译工具链Qt+OpenCV+ffmpeg等库支持总结（二）

    承接上文http://www.cnblogs.com/bombe1013/p/3294301.html,我们接下来说说Qt的移植与安装. 很喜欢Qt这个库以及Qt creater这个IDE,其实个人觉 ...

  6. bzoj1485

    首先考虑dp,设f[i,j]表示1~i用过了,期中j个放在偶数位然后转移大家都会 这显然TLE,我们观察这个dp,任意前i个数,无论怎么放,放在奇数位的数的个数一定要大于等于放在偶数位的个数 于是很明 ...

  7. 【转】1.5 起步 - 初次运行 Git 前的配置

    原文网址:http://git-scm.com/book/zh/v1/%E8%B5%B7%E6%AD%A5-%E5%88%9D%E6%AC%A1%E8%BF%90%E8%A1%8C-Git-%E5%8 ...

  8. gitphp日期乱码解决方案

    出现日期乱码的在以下文件中 templates rss tag commitdiffplain log project commit 搜索文件中的 %z 修改为以下代码 {$commit->Ge ...

  9. HDU 4393 Throw nails

    Throw nails Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  10. android数据库(随apk一起发布数据库)

    读取数据库+数据库版本更新 注意: a, 将随apk发布的数据库放在android工程下/res/raw路径下. b, 数据库文件存到手机上时,路径在/data/data/你的包名/databases ...