下载地址: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. iOS Architectures 浅谈
			
    iOS项目打包,或者只是在项目里面调用第三方静态库抑或是自己新建一个静态库,就要无可避免的和Architectures打交道.Architectures在Targets面板的Build Setting ...
    
			
    2. 
						
  2. Lambda 表达式[MSDN]
			
    Lambda 表达式是一种可用于创建委托或表达式目录树类型的匿名函数. 通过使用 lambda 表达式,可以写入可作为参数传递或作为函数调用值返回的本地函数.Lambda 表达式对于编写 LINQ 查 ...
    
			
    3. 
						
  3. JetBrains PyCharm 2016.2.3注册码
			
    43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...
    
			
    4. 
						
  4. java dom4j封装和解析XML
			
    package org.scbit.lsbi.scp.utils; import java.util.ArrayList; import java.util.List; import org.dom4 ...
    
			
    5. 
						
  5. shell 脚本随机抽取班级学生
			
    #/bin/bash jw=(name1,name2,name3......name39) ..} do a=$(date +%N) b=$() ]" "${jw[$b]} don ...
    
			
    6. 
						
  6. SQL删除重复数据只保留一条
			
    用SQL语句,删除掉重复项只保留一条 在几千条记录里,存在着些相同的记录,如何能用SQL语句,删除掉重复的呢 1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select ...
    
			
    7. 
						
  7. BOOST_AUTO宏
			
    在boost中,有个非常不错的宏BOOST_AUTO(),它的作用是自动给var定义类型,适合function()函数返回的值的类型. int function() { ; } main() { BO ...
    
			
    8. 
						
  8. 导出（Excel格式）
			
    poi导出,需要的poi jar包: 步骤一.两个工具类: 1.ExcelUtil.java package util; import java.awt.Color; import java.io.F ...
    
			
    9. 
						
  9. javase--反射
			
    //书写规则 package cn.reflex; public interface PCI { public void open(); public void close(); } //调用方法 p ...
    
			
    10. 
						
  10. （2）WebAPI的增删改查
			
    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...
    
			
    11.