<!--引入以下两个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. 【转】五种开源协议的比较（BSD, Apache, GPL, LGPL, MIT）

    当 Adobe.Microsoft.Sun 等一系列巨头开始表现出对”开源”的青睐时,”开源”的时代即将到来! 现今存在的开源协议很多,而经过 Open Source Initiative 组织通过批 ...

  2. 关于fedora下jdk的安装

    http://zhumeng8337797.blog.163.com/blog/static/1007689142012472620637/ alternative命令 http://blog.csd ...

  3. R语言笔记：快速入门

    1.简单会话 > x<-c(1,2,4) > x [1] 1 2 4 R语言的标准赋值运算符是<-.也可以用=,不过不建议用它,有些情况会失灵.其中c表示连接(concaten ...

  4. 散列表 （Hash table，也叫哈希表）

    散列表是根据关键字(Key value)而直接访问在内存存储位置的数据结构.也就是说,它通过把键值通过一个函数的计算,映射到表中一个位置来访问记录,这加快了查找速度.这个映射函数称做散列函数,存放记录 ...

  5. The document has been modified outside of Code Composer. Would you like to reload the file

    2013-06-20 10:03:32 烧写过程是合众达给出的文档 problem: I'm new to using Code Composer Studio 3.3 and am having a ...

  6. Android 签名(6)编译时源码的签名

    1,使用源码中的默认签名 在源码中编译一般都使用默认签名的,在某源码目录中用运行下面命令能看到签名命令. $ mm showcommands Android提供了签名的程序signapk.jar,用法 ...

  7. mac tree命令

    mac下默认是没有 tree命令的,不过我们可以使用find命令模拟出tree命令的效果,如显示当前目录的 tree 的命令: $ find . -print | sed -e 's;[^/]*/;| ...

  8. chrome渲染hover状态tranform相邻元素抖动bug

    最近同事在使用 css3 的 transition + tranform 的时候影响了相邻的元素出现bug.或者说相邻的元素出现抖动bug. 然而把 hover 状态的 tranform 属性删了后, ...

  9. poj 2488 A Knight's Journey（ dfs ）

    题目:http://poj.org/problem?id=2488 题意: 给出一个国际棋盘的大小,判断马能否不重复的走过所有格,并记录下其中按字典序排列的第一种路径. #include <io ...

  10. 异步加载DOM造成的高度问题造成iScroll不能滚动

    今天在使用iscroll4 做一个简单触屏滚动demo,发现上下拖动的时候总是会回弹,不能看到下面的内容.这个问题苦恼了很久,终于解决,下来就分享一下: 我的需求是这样的: 1.获取json数据app ...