下载地址: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. ProgressBar---进度条
			
    最近在处理标题进度条时,耗费了一些时间,现在总结一下ProgressBar的相关知识,有不对的地方请大神们批评指正! 进度条主要有以下三种: 1.对话框进度条 2.标题进度条 注意:requestWi ...
    
			
    2. 
						
  2. 使用ndk编译c可执行程序
			
    1.创建工程目录  在ubuntu系统下搭建好ndk编译环境,创建test目录 mkdir test 在test目录下创建jni目录 cd test mkdir jni 2.编写源代码 vim hel ...
    
			
    3. 
						
  3. powershell使用
			
    主要语法点: -match -notmatch -replace -join -split -and -or -xor -not ! +.-.*./.% =.+=.-=.*=./=.%= -eq.-n ...
    
			
    4. 
						
  4. google tensorflow guide
			
    # For CPU-only version $ pip install https://storage.googleapis.com/tensorflow/linux/cpu/tensorflow- ...
    
			
    5. 
						
  5. ubuntu 加载新硬盘或分区
			
    查看目前挂载情况 df -lh 查看新的空间或硬盘 fdisk -lu 新硬盘分区 fdisk /dev/sda 输入m 根据提示输入n(创建一个分区) 然后输入e(扩展分区) 输入分区数1 然后指定 ...
    
			
    6. 
						
  6. iOS 实例变量修饰符
			
    @public 可以在其他类中访问被@public修饰的成员变量 可以在本类中访问被@public修饰的成员变量 可以在子类中访问fl中被@public修饰的成员变量 @private 不可以在其他类 ...
    
			
    7. 
						
  7. ASCII码、Unicode码 转中文
			
    ASCII码.Unicode码 转中文 在最近工作中遇到了一些汉字编码转换的处理,可以通过正则表达式及转换字符来实现转成中文 Unicode转换示例 通常为10位编码, 通过digit参数传入 pri ...
    
			
    8. 
						
  8. CMS系统存储路径
			
    CMS系统特点:前后端分离 index.html 首页文件index.php 管理后台的页面 api文件夹: 提供的接口 caches文件夹: 缓存文件 html文件夹:  生成的静态页面 phpcm ...
    
			
    9. 
						
  9. 12/13 Oracle连接报错
			
    1.oracle连接错误the network adapter could not establish the connection参考:http://blog.sina.com.cn/s/blog_ ...
    
			
    10. 
						
  10. UML大战需求分析——阅读笔记03
			
    读<UML大战需求分析>有感03 状态机图和活动图在样子比较相似,但状态机图是用来为对象的状态及造成状态改变的事件建模.我们大二学习UML统一建模语言状态机图模块时了解到,UML的状态机图 ...
    
			
    11.