屏幕滚动到那个图片的上边缘，才会触发请求加载时间。这样就很好解决一些当第一屏，我们看不到的而且不用第一次加载的图片，就可以触发加载
节约一次下载的时间
演示地址:http://www.corange.cn/demo/3755/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>延迟加载图片jquery插件</title>
<meta name="generator" content="Mephisto" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({
placeholder : "grey.gif",
effect : "fadeIn"
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}

#content {
width: 770px;
}

</style>

</head>

<body>

<div class="entry">
<img src="../demo1.jpg" width="765" height="574"><br/>
<img src="../demo2.jpg" width="765" height="574"><br/>
<img src="../demo3.jpg" width="765" height="574"><br/>
<img src="../demo4.jpg" width="765" height="574" ><br/>
<img src="../demo5.jpg" width="765" height="574"><br/>
<img src="../demo6.jpg" width="765" height="574" ><br/>
</div>



</body>
</html>
js文件请到演示地址下载

原文地址:http://www.corange.cn/archives/2010/12/3755.html