<!--引入以下两个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. 15个必知的Android开发者选项

    Android开发者选项,看起来很简单的事情,其实很多同学对它了解得不够,Google用心良苦得为我们设计了这么多小开关都是有它的作用的,今天也花了点时间,过了一遍全部的30多个开关,从中整理出15个 ...

  2. JS复制对象

    CSSCommonJS.DeepCopy = function (json) { if (typeof json == 'number' || typeof json == 'string' || t ...

  3. 在Tomcat上配置CAS 自己的体验

    演示环境 本文演示过程在同一个机器上的(也可以在三台实体机器或者三个的虚拟机上),环境如下: windows732位 JDK 1.6.0_18 Tomcat 6.0.29 CAS-server-3.4 ...

  4. Git教程(10)git比较复杂的功能

    1,只拣选某分支中的一个提交,然后把它合并到当前分支 $ git cherry-pick e43a6fd3e94888d76779ad79fb568ed180e5fcdf 2,Rerere 它是一种重 ...

  5. 【转】Picasso – Android系统的图片下载和缓存类库

    来源:http://blog.chengyunfeng.com/?p=492 另一篇参考:http://blog.csdn.net/xu_fu/article/details/17043231 Pic ...

  6. 8.21 usaco

    summary:6 bzoj1692://后缀数组就行了O(nlogn)c[30]会RE...注意!!! #include<cstdio> #include<cstring> ...

  7. 微软 Virtual studion Code

    在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 预览版外,最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code ...

  8. 探秘Java虚拟机——内存管理与垃圾回收

    本文主要是基于Sun JDK 1.6 Garbage Collector(作者:毕玄)的整理与总结,原文请读者在网上搜索. 1.Java虚拟机运行时的数据区 2.常用的内存区域调节参数 -Xms:初始 ...

  9. MEX文件编写和调试

    作者kaien,2010/02/16 以前我写过一篇文章,详细的介绍过MEX的格式,语法,编译,调试等.可惜记不清放在哪里了.而最近又用到MEX编程,所以只能重新温习一番.时间有限,只记下简要流程和注 ...

  10. java.lang.ExceptionInInitializerError的原因（转）

    这个错误是说变量初始化出现问题,通常出现在静态变量尤其是单例模式.这种问题往往是初始化顺序不对造成的,下面举个简单的例子. import java.util.HashMap; import java. ...