<!--引入以下两个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. Netty实现高性能RPC服务器

    在本人写的前一篇文章中,谈及有关如何利用Netty开发实现,高性能RPC服务器的一些设计思路.设计原理,以及具体的实现方案(具体参见:谈谈如何使用Netty开发实现高性能的RPC服务器).在文章的最后 ...

  2. C#中string.Format()和ToString()格式化方法

    C#数字格式化输出是我们在编程中经常需要处理的事情,那么这里向你介绍了一些C#数字格式化输出的例子,这样就会方便你来选择和比较,什么方式是比较适合自己项目的. int a = 12345678; C# ...

  3. Android开发之少去踩坑，多走捷径【转】

    作者:gzjay,腾讯MIG无线产品部 高级工程师 最近一朋友提了几个Android问题让我帮忙写个小分享,我觉得对新人还是挺有帮助的,所以有了这个小分享. 1.目前, Android APP开发完成 ...

  4. 第二部分 overlay 架构初探

    1 overlay可能支持的颜色格式/* possible overlay formats可能支持的颜色格式 */enum {    OVERLAY_FORMAT_RGBA_8888    = HAL ...

  5. bzoj3572

    通过这题我知道了一个鬼故事,trunc(ln(128)/ln(2))=6……以后不敢轻易这么写了 好了言归正传,这题明显的构建虚树,但构建虚树后怎么树形dp呢? 由于虚树上的点不仅是议事会还有可能是议 ...

  6. Unity3D之如何创建正确的像素比在屏幕上

    关于这篇文章的命名,实在不知道怎么命名好,大概功能就是:比如一张宽高为100x100的图片显示在屏幕上,那2D摄像头的Size值为多少时,屏幕上显示出来图片大小和图片的实际像素一致. 这里涉及到一个G ...

  7. Weblogic11g安装

    我们在64位的服务器上为提高性能要安装64位的weblogic.经常在网上看到有人问,weblogic有64位的么?weblogic需要破解么? weblogic有专门的64位版本,这里安装的是web ...

  8. 使用SVN小结

    自从加入团队后,开始使用SVN,以下是个人对SVN的一些认识和小结. 一.SVN是什么? SVN是版本管理工具,譬如团队进行项目开发,项目代码都储存在服务器上,成员可用SVN在本地获得并更新代码. 二 ...

  9. WCF 学习总结2 -- 配置WCF

    前面一篇文章<WCF 学习总结1 -- 简单实例>一股脑儿展示了几种WCF部署方式,其中配置文件(App.config/Web.config)都是IDE自动生成,省去了我们不少功夫.现在回 ...

  10. 嵌入式Linux USB WIFI驱动的移植

    硬件平台:飞思卡尔MX258开发板 操作系统:Linux2.6.31 WIFI:    RT2860 USB WIFI模组 交叉编译环境:gcc version 4.1.2 调试步骤: 第一步:测试U ...