<!--引入以下两个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. node.js 异步式I/O 与事件驱动

    Node.js 最大的特点就是异步式 I/O(或者非阻塞 I/O)与事件紧密结合的编程模式.这种模式与传统的同步式 I/O 线性的编程思路有很大的不同,因为控制流很大程度上要靠事件和回调函数来组织,一 ...

  2. PHP实现浏览历史记录

    http://www.3a88.com/service/206.html http://www.1360.cc/ZhanChangJiaoCheng/6831.html http://www.osch ...

  3. 存储过程 务的概念 事务的特性 关于异常的处理 连接池 构JdbcUtil类

    1 存储过程    1)用当地数据库语言,写的一段业务逻辑算法,并该算法存储在客户端    2)使用存储过程需要用于CallableStatement接口,同时需要使如下SQL命令调用:{call a ...

  4. 在NPAPI开发火狐浏览器插件在NPAPI插件

    1.插件是什么 插件是一种遵循一定规范的应用程序接口编写出来的程序.插件必须依附于一个宿主程序,为宿主程序提供增强功能.插件的种类有很多,这里主要讨论浏览器插件. IE下利用OLE和COM技术开发的浏 ...

  5. C# 框架是什么？MVC是什么 ？工厂模式是什么？设计模式是什么？三层架构是什

    C# 框架是什么?MVC是什么 ?工厂模式是什么?设计模式是什么?三层架构是什么?如果要学我该从何学起??? C# 框架看这里http://download.csdn.net/source/25784 ...

  6. 深入理解Android内存管理原理（六）

    一般来说,程序使用内存的方式遵循先向操作系统申请一块内存,使用内存,使用完毕之后释放内存归还给操作系统.然而在传统的C/C++等要求显式释放内存的编程语言中,记得在合适的时候释放内存是一个很有难度的工 ...

  7. 使用LINQ 對List分頁/區

    listview之類的服務器控件分頁自不用多說,拖拖控件改改屬性分分鐘的事.就不浪費大家時間了.   這裏只寫大概思路及關鍵代碼了.   LINQ裏有一個對集合進行分區的操作可用於分頁.   page ...

  8. windows远程桌面3389超时锁定时间调整方法（取消锁屏时间限制）

    我们在管理服务器操作时,有时候需要长时间操作服务器,有时候稍微离开下倒杯水或接个稍长点的电话,就超时断开了很烦啦!有没有方法解决这个问题类?答案是有的!我只要在组策略里面,稍微修改下超时时间就可以了. ...

  9. C#多线程下载一个文件

    这里只是说明多线程下载的理论基础,嘿嘿,并没有写多线程下载的代码,标题党了,但是我相信,看完这个代码就应该能够多线程的方式去下载一个文件了. 多线程下载是需要服务器支持的,这里并没有判断服务器不支持的 ...

  10. 设计模式_C++源码+总结

    C++源码下载: http://yunpan.cn/Q7fadjGgEJxib  提取码 63cb 总结: