来源：http://www.jq22.com/jquery-info390

使用前要求：

img的设置：

1、class要配上“lazy”；

2、用data-original代替src；

3、如果想要占位的话，img别忘了写上宽高。

<!DOCTYPE html>

<html>

<head>

<title>jQuery图片延迟加载插件jQuery.lazyload | jQuery插件库</title>

<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>

<script src="http://demo.jq22.com/tuupola-jquery_lazyload/jquery.lazyload.js?v=1.9.1" type="text/javascript"></script>

</head>

<body>

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/viper_1.jpg" width="765" height="574" alt="Viper 1">

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">

<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">

<script type="text/javascript" charset="utf-8">

  $(function() {

      $("img.lazy").lazyload({effect: "fadeIn"});

  });

</script>

</body>

</html>

jquery.lazyload.js-v1.9.1延时加载插件，已兼容ie6和各大浏览器的更多相关文章

  1. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  2. jquery和js的几种页面加载函数的方法以及执行顺序

    参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html    https://www.cnblogs.com/james641/p/783837 ...

  3. jquery.datatable.js与CI整合 异步加载（大数据量处理）

    http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...

  4. jquery easyui使用（三）······datagrid加载数据(已解决)

    <div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '# ...

  5. JS怎样实现图片的懒加载以及jquery.lazyload.js的使用

    在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...

  6. jQuery之jquery.lazyload.js插件用法

    研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...

  7. jQuery图片延迟加载插件jquery.lazyload.js

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  8. Selenium2(WebDriver)总结(一)---启动浏览器、设置profile&加载插件

    本文主要记录下在使用selenium2/webdriver时启动各种浏览器的方法.以及如何加载插件.定制浏览器信息(设置profile)等 环境搭建可参考我的另一篇文章:http://www.cnbl ...

  9. 懒加载插件- jquery.lazyload.js

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

随机推荐

  1. [转帖]算法精解：DAG有向无环图

    算法精解:DAG有向无环图 https://www.cnblogs.com/Evsward/p/dag.html DAG是公认的下一代区块链的标志.本文从算法基础去研究分析DAG算法,以及它是如何运用 ...

  2. .Net Core3.0使用gRPC 和IdentityServer4

    gRPC是什么gRPC是可以在任何环境中运行的现代开源高性能RPC框架.它可以通过可插拔的支持来有效地连接数据中心内和跨数据中心的服务,以实现负载平衡,跟踪,运行状况检查和身份验证.它也适用于分布式计 ...

  3. 【题解】Luogu P3349 [ZJOI2016]小星星

    原题传送门 我们考虑设\(dp_{i,j}\)表示树上的点\(i\)在图上对应的点为\(j\)时\(i\)和子树对应在图上的方案数 \(dp_{u_i}=\prod_{v \in u.son} dp_ ...

  4. 『正睿OI 2019SC Day2』

    分治 普通分治 普通分治是指针对序列或平面问题的分治算法. 思想 普通分治的思想是指将一个序列问题或平面问题通过某种划分方式划分为若干个子问题,直到子问题规模足够小,可以直接回答,再通过合并得到原问题 ...

  5. C# - Array.Sort()方法

    Array类简介 Array类是C#中所有数组的基类.我们常用的[]声明数组即为Array类的语法,我们可通过Array类提供的各种方法对C#中数组进行操作.最典型的就是数组排序 Array.Sort ...

  6. java基础 抽象

    /** * 抽象方法:就是加上abstract关键字,并去掉大括号,分号结束 * 抽象类:抽象方法坐在的类,必须是抽象类.在class前家abstract即可 * * 如何使用抽象类和抽象方法: * ...

  7. win10企业版|激|活|码

    使用下面的激活码升级成企业版 NPPR9-FWDCX-D2C8J-H872K-2YT43 激活后,如果右下角出现未激活的白色字体用cmd命令,管理员窗口运行下面的命令 win10企业版用户请依次输入: ...

  8. django中navie时间和aware时间详解

    navie时间和aware时间: 什么是navie时间?什么是aware时间? navie时间:不知道自己的时间表示的是哪个时区的.也就是不知道自己几斤几两.比较幼稚. aware时间:知道自己的时间 ...

  9. JavaScript 之 Array 对象

    Array 对象 之前已经了解了 Array(数组)的定义和基本操作.数组的基本操作. 下面来学习更多的方法. 检测一个对象是否是数组 instanceof // 看看该变量是否是该对象的实例 Arr ...

  10. springboot-发布jar包

    其他参考链接: https://www.cnblogs.com/blog5277/p/5920560.html 环境变量配置: 新建系统变量MAVEN_HOME: 在path中添加: ;%MAVEN_ ...