下载地址:https://github.com/tuupola/jquery_lazyload
用法:
头部引用
<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

body引用
修改 HTML 代码中需要延迟加载的 IMG 标签
<!-- 
将真实图片地址写在 data-original 属性中，而 src 属性中的图片换成占位符的图片（例如 1x1 像素的灰色图片或者 loading 的 gif 图片） 
添加 class="lazy" 用于区别哪些图片需要延时加载，当然你也可以换成别的关键词，修改的同时记得修改调用时的 jQuery 选择器 
添加 width 和 height 属性有助于在图片未加载时占满所需要的空间 
--> 
<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480"> 
调用
$("img.lazy").lazyload();
 

参数说明

名称 默认值 说明
container window 父容器。延迟加载父容器中的图片。 [Demo1] [Demo2]
event 'scroll' 触发加载的事件 [Demo]
effect 'show' 加载使用的动画效果，如 show, fadeIn, slideDown 等 jQuery 自带的效果，或者自定义动画。 [Demo]
effectspeed undefined 动画时间。作为 effect 的参数使用：effect(effectspeed)
data_attribute 'original' 真实图片地址的 data 属性后缀
threshold 0 灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示；设为整数表示图片距离 x 像素进入显示区域时进行加载；设为负数表示图片进入显示区域 x 像素时进行加载。
failure_limit 0 容差范围。页面滚动时，Lazy Load 会遍历延迟加载的图片，检查是否在显示区域内，默认找到第 1 张不可见的图片时，就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同，但是也可能会出现例外，通过该值来扩大容差范围。
skip_invisible true 跳过隐藏的图片。图片不可见时（如 display:none），不强制加载。
appear null 图片加载时的事件 (Function)，有 2 个参数：elements_left（未加载的图片数量）、settings（lazyload 的参数）。[Demo]（参考 DEMO 的源代码）
load null 图片加载后的事件 (Function)，有 2 个参数，同 appear 。[Demo]（参考 DEMO 的源代码） 

在容器中使用:
#container {

    height: 600px;

    overflow: scroll;

}

$("img.lazy").lazyload({

     container: $("#container")

});

实例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Lazy Load Enabled With AJAX Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.container img {
margin-bottom: 10px;
}

#container {
width: 800px;
overflow: scroll;
}

#inner_container {
width: 4750px;
}
</style>

</head>
<body>
<div id="container">
<div id="inner_container">
<img class="lazy" src="img/loading_16.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
<img class="lazy" src="img/loading_16.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
<img class="lazy" src="img/loading_16.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
<img class="lazy" src="img/loading_16.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
<img class="lazy" src="img/loading_16.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
<img class="lazy" src="img/loading_16.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
</div>
</div>

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.7"></script>
<script>

$(function() {
$("img.lazy").lazyload({
effect : "fadeIn",
container: $("#container"),
threshold : -200
});
});

</script>
</body>
</html>

参考:
http://www.appelsiini.net/projects/lazyload
http://code.ciaoca.com/jquery/lazyload/
												


											
jquery-lazyload延迟加载图片的更多相关文章
	

    
						
  1. jquery.lazyload 实现图片延迟加载jquery插件
		
    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...
    
		
    2. 
						
  2. JQuery LazyLoad实现图片延迟加载-探究
		
    对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...
    
		
    3. 
						
  3. jquery.lazyload.js图片延迟加载
		
    转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下    ...
    
		
    4. 
						
  4. jquery.lazyload.js图片延迟加载(懒加载)--转载
		
    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...
    
		
    5. 
						
  5. jquery.lazyload.js 图片延迟加载
		
    当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...
    
		
    6. 
						
  6. 使用jQuery lazyload 实现图片延迟加载
		
    下载地址 使用说明 0. 准备工作 下载jQuery和lazyload 插件(地址如上) 1. HTML 引入jQuery库和lazyload插件 <div id="imagesCon ...
    
		
    7. 
						
  7. jquery lazyload延迟加载技术的实现原理分析_jquery
		
    前言 懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页, ...
    
		
    8. 
						
  8. jquery lazyload延迟加载技术的实现原理分析
		
    懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网 ...
    
		
    9. 
						
  9. 使用jquery插件实现图片延迟加载技术（懒加载）
		
    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
    
		
    10. 
						
  10. 延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）
		
    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. iOS9 中的On-Demand Resources，编辑中。。。
			
    最近要写一个包含许多Html内容的应用,就想能不能通过ios9的这个新特性,缩小一下app的体积,也看看这个新特性和最常使用的用服务器下载资源包有什么不同. 先看官方文档: http://www.co ...
    
			
    2. 
						
  2. Android带图片的Toast（自定义Toast）
			
    使用Android默认的Toast Toast简介: Toast是一个简单的消息显示框,能够短暂的出现在屏幕的某个位置,显示提示消息. 默认的位置是屏幕的下方正中,一般Toast的使用如下: Toas ...
    
			
    3. 
						
  3. java复杂枚举
			
    枚举以红绿灯为例,红灯30s后为绿灯,绿灯45s后为黄灯,黄灯5s后为红灯.具体的枚举代码如下: public enum TrafficLamp{ RED(30){ public TrafficLam ...
    
			
    4. 
						
  4. Dcloud HTML5 监听蓝牙设备 调用 原生安卓实现
			
    最近一直搞Dcloud ,这是HTML5版本的开发,打包时候,可以打包成 apk 和ipa 分别运行在安卓和ios 机器上面, 但是这里面的资料很少,遇到问题,之后只能自己钻研总结, 现在有这么一个需 ...
    
			
    5. 
						
  5. iOS 通信常用小功能
			
    打电话 a.最简单最直接的方式:直接跳到拨号界面 NSURL *url = [NSURL URLWithString:@"tel://10010"]; [[UIApplicatio ...
    
			
    6. 
						
  6. iOS自动检测版本更新
			
    虽然苹果官方是不允许应用自动检测更新,提示用户下载,因为苹果会提示你有多少个软件需要更新,但是有的时候提示用户一下有新版还是很有必要的. 首先说一下原理: 每个上架的苹果应用程序,都会有一个应用程序的 ...
    
			
    7. 
						
  7. 在Linux和Windows的Docker容器中运行ASP.NET Core
			
    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 译者序:其实过去这周我都在研究这方面的内容,结果周末有事没有来得及总结为文章,Scott H ...
    
			
    8. 
						
  8. Python-模块的使用
			
    基础概念 - 模块是Python组织代码的基本方式 - 一个Python脚本可以单独运行,也可以导入到另一个脚本中运行,当脚本被导入运行时,我们将其称为模块(module) - 所有的.py文件都可以 ...
    
			
    9. 
						
  9. mysql 中的LIMIT用法
			
    select * from table_name LIMIT 起始偏移量,数量 (1)起始偏移量为0:代表没有偏移,即从第1行开始. (2)数量为-1:代表是无穷,即偏移量之后所有的行. (3)LIM ...
    
			
    10. 
						
  10. 百度地图API试用--(初次尝试)
			
    2016-03-17: 百度地图API申请key的步骤相对简单,不做过多阐述. 初次使用百度地图API感觉有点神奇,有些功能加进来以后有点问题,注释掉等有空再解决. 代码如下: <%@ page ...
    
			
    11.