来源：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. 蚂蚁金服2019实习生面经总结(已拿口头offer)

    一面 (37 分钟左右) 一面是上海的小哥打来的,3.12 号中午确认的内推,下午就打来约时间了,也是唯一一个约时间的面试官.约的晚上八点.紧张的一比,人生第一次面试就献给了阿里. 幸运的是一面的小哥 ...

  2. C#实现ActiveMQ消息队列

    本文使用C#实现ActiveMQ消息队列功能. 一.首先需要导入两个包,分别是:Apache.NMS 和 Apache.NMS.ActiveMQ 二.创建Winform程序实现生产者功能. 三.Pro ...

  3. 【题解】Luogu P4284 [SHOI2014]概率充电器

    原题传送门 我们知道,每个电器充电对充电电器数的贡献都是相等的1,所以若第\(i\)个电器有\(p_i\)的概率充电时 \[E=\sum_{i=1}^np_i\] 我们考虑如何求\(p_i\),根据树 ...

  4. DES加密 java与.net可以相互加密解密两种方法

    DES加密 java与.net可以相互加密解密两种方法 https://www.cnblogs.com/DrWang/archive/2011/03/30/2000124.html sun.misc. ...

  5. c# 基本类型存储方式的研究

    基本单位 二进制,当前的计算机系统使用的基本上是二进制系统.二进制的单位是位,每一位可以表示2个数: 0或1.byte(字节) 有8位,可以表示的数为2的8次方,即256个数,范围为[0-255]. ...

  6. 动软软件 生成 实体类模板(EnterpriseFrameWork框架)

    1.废话不多说,直接上效果图 . 2 .动软模板代码 <#@ template language="c#" HostSpecific="True" #&g ...

  7. 第一阶段：Java基础 1.JAVA开发介绍---6. Java基本数据类型

    Java 的两大数据类型: 内置数据类型(基本数据类型) 引用数据类型 本数据类型: Java语言提供了八种基本类型.六种数字类型,一种字符类型,还有一种布尔型. byte,short,int,lon ...

  8. Java IO---缓冲流和转换流

    一. 缓冲流 ​ 缓冲流是处理流的一种,也叫高效流,是对4个基本输入输出流的增强,它让输入输出流具有1个缓冲区,能显著减小与外部的IO次数,从而提高读写的效率,并且提供了一些额外的读写方法. ​ 因为 ...

  9. Django--视图函数

    目录 视图函数 HttpRequest对象 request属性 request常用方法 HttpResponse对象 render() redirect() JsonResponse 视图函数 一个视 ...

  10. 【JVM】CMS垃圾回收器

    一.简介 Concurrent Mark Sweep,是一种以获取最短回收停顿时间为目标的收集器,尤其重视服务的响应速度. CMS是老年代垃圾回收器,基于标记-清除算法实现.新生代默认使用ParNew ...