首页 > 代码库 > jquery插件实现图片延迟加载（lazyload.js）
jquery插件实现图片延迟加载（lazyload.js）
http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.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>图片加载技术实例-欢迎关注tinyphp的博客</title>
<SCRIPT src="http://www.mamicode.com/jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="http://www.mamicode.com/jquery.lazyload.js" type=text/javascript></SCRIPT>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({
placeholder : "images/loading.gif",
effect: "fadeIn"
});
});
</script>
<style>
img a,img{border:0px;}
div{ margin-bottom:10px;}
</style>
</head>
<body>
<img src="http://www.mamicode.com/images/0.jpg" /><br />
<div><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/loading.gif" data-original="images/1.jpg"></a></div>
<div><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/loading.gif" data-original="images/2.jpg"></a></div>
<div><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/loading.gif" data-original="images/3.jpg"></a></div>
<div><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/loading.gif" data-original="images/4.jpg"></a></div>
<div><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/loading.gif" data-original="images/5.jpg"></a></div>
<div><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/loading.gif" data-original="images/6.jpg"></a></div>
<div><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/loading.gif" data-original="images/7.jpg"></a></div>
<div><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/loading.gif" data-original="images/8.jpg"></a></div>
<div><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/loading.gif" data-original="images/9.jpg"></a></div>
<div><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/loading.gif" data-original="images/10.jpg"></a></div>
</body>
</html>
fadeIn()
fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
<html>
<head>
<script type="text/javascript" src="http://www.mamicode.com/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
描述：对一个元素应用动画特效。
返回：jQuery
jquery插件实现图片延迟加载（lazyload.js）