下载地址: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. Linux下多线程下载利器 axel
			
    参考 https://teddysun.com/377.html 使用示例: axel -an https://ubuntu-mate.org/raspberry-pi/ubuntu-mate-16. ...
    
			
    2. 
						
  2. cocos2d-js 学习笔记 --安装调试（1）
			
    目前从国内来看,比较知名的,适合前端程序员使用的游戏框架,基本是 egret 和cocos2d-js;刚好两个框架都学习了下, egret的是最近兴起的一个框架主要使用TypeScript.js语言做 ...
    
			
    3. 
						
  3. php阳历转农历的类 谷歌到的
			
    <?phpclass Lunar {    var $MIN_YEAR = 1891;    var $MAX_YEAR = 2100;    var $lunarInfo = array(   ...
    
			
    4. 
						
  4. JS截取，删除，替换字符串常用方法详细
			
    删除和替换是一样的,开始用的是,如果是删除就直接替换为空 arr="abc001abc002abc003" arr.replace('abc','123') 结果发现只能替换第一个 ...
    
			
    5. 
						
  5. Linux 相关面经
			
    都说没用过Linux都不要说自己搞过开发.我因为项目就是Linux没办法才接触Linux的,不过用了一段时间大黑屏外人看不懂的样子感觉还是屌屌的,虽说用过但知道也仅限于权限内的一些知识,还是一起看下面 ...
    
			
    6. 
						
  6. ios 输入框bar设置
			
    _textView = [[class alloc] init];        _textView.translatesAutoresizingMaskIntoConstraints = NO;   ...
    
			
    7. 
						
  7. c#_图表之zeGraph
			
    关于图表控件: http://blog.csdn.net/sgear/article/details/1449025 其中zedGraph的基本方法及属性介绍: http://wenku.baidu. ...
    
			
    8. 
						
  8. KNN识别图像上的数字及python实现
			
    领导让我每天手工录入BI系统中的数据并判断数据是否存在异常,若有异常点,则检测是系统问题还是业务问题.为了解放双手,我决定写个程序完成每天录入管理驾驶舱数据的任务.首先用按键精灵录了一套脚本把系统中的 ...
    
			
    9. 
						
  9. 用winform程序来了解委托和事件
			
    一.浅谈委托 如果有个过winform 和webform 程序开发的小伙伴一定有个这样的感觉吧,点击Button直接就执行了那个方法,到此他是怎么实现了的呢,大家有考虑过没有? 回到正题,什么是委托呢 ...
    
			
    10. 
						
  10. JS string 截取
			
    subStubstring(a,b); a:开始索引 b:结束索引 subStr(c,d) c:开始索引 d:截取数量.
    
			
    11.