<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用图片延迟加载来优化页面性能（jQuery）</title>
<link rel="stylesheet" href="http://www.feelcss.com/public-css/reset.css">
<style type="text/css">
.page-info { padding:8px 15px; background:#fcea9e; border-bottom:1px solid #b6bac0; font:normal 16px Georgia; }
.page-info h1 { float:left; }
.page-info a { font-weight:bold; color:#222; }
.return-article { float:right; }
.return-article h2{ display:inline; }
body{ height:2700px; }
.a1{ margin:40px; 1000px; background:#e6e6e6; }
</style>
</head>
<body>
<div class="page-info clearfix">
<h1><a href="http://www.feelcss.com" title="回到 Hey@feelcss 首页">Hey@feelcss</a></h1>
<div class="return-article">返回文章：<h2><a href="http://www.feelcss.com/picture-lazy-loading-to-optimize-page-performance.html" title="利用图片延迟加载来优化页面性能（jQuery）">利用图片延迟加载来优化页面性能（jQuery）</a></h2></div>
</div>
<script type="text/javascript">
for(var i=0; i<40; i++){
document.write("<p style='color:#999;font-size:12px;'>【请往下拉动滚动条】</p>");
}
</script>
<div class="a1">
<img class="lazyLoading" data-url="http://www.feelcss.com/demo/picture-lazy-loading/022051.42796807.jpg">
<noscript><img src="http://www.feelcss.com/demo/picture-lazy-loading/022051.42796807.jpg">替换方案</noscript>
</div>
<div class="a1">
<img class="lazyLoading" data-url="http://www.feelcss.com/demo/picture-lazy-loading/141500.94376871.jpg">
<noscript><img src="http://www.feelcss.com/demo/picture-lazy-loading/141500.94376871.jpg">替换方案</noscript>
</div>
<div class="a1">
<img class="lazyLoading" data-url="http://www.feelcss.com/demo/picture-lazy-loading/085825.73643922.jpg">
<noscript><img src="http://www.feelcss.com/demo/picture-lazy-loading/085825.73643922.jpg">替换方案</noscript>
</div>
<div class="a1">
<img class="lazyLoading" data-url="http://www.feelcss.com/demo/picture-lazy-loading/022652.83797841.jpg">
<noscript><img src="http://www.feelcss.com/demo/picture-lazy-loading/022652.83797841.jpg">替换方案</noscript>
</div>
<div class="a1">
<img class="lazyLoading" data-url="http://www.feelcss.com/demo/picture-lazy-loading/090002.79394226.jpg">
<noscript><img src="http://www.feelcss.com/demo/picture-lazy-loading/090002.79394226.jpg">替换方案</noscript>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.feelcss.com/demo/picture-lazy-loading/jquery.imgLazyLoading.js"></script>
<script type="text/javascript">
$(".lazyLoading").imgLazyLoading({
url : "data-url",
fadeIn : 400
});
</script>
</body>
</html>
/*
* 基于jQuery的图片延迟加载插件
* by Hey@feelcss (http://www.feelcss.com/)
*/
;(function($){
$.fn.imgLazyLoading = function(options){
//定义需要的参数的初始值，并合并options对象到set对象
var set = $.extend({
url : "data-url",
fadeIn : 0
}, options || {});
var cache = [];
$(this).each(function(){
var nodeName = this.nodeName.toLowerCase();
var url = $(this).attr(set.url);
//获取每个元素的信息
var data = {
obj : $(this),
url : url,
tag : nodeName
}
cache.push(data);
});
var lazyLoading = function(){
$.each(cache,function(i, e){
var obj = e.obj,
url = e.url,
tag = e.tag;
if(obj){
var winHeight = $(window).height(); //当前窗口高度
var scrolltop = $(window).scrollTop(); //滚动条偏移高度
var oTop = obj.offset().top; //图片相对高度
//判断是否在当前窗口内
if((oTop-scrolltop) > 0 && (oTop-scrolltop) < winHeight){
if(tag === "img"){
if(set.fadeIn){
//渐出效果
obj.fadeIn(set.fadeIn);
}
//给src属性赋值
obj.attr("src", url);
}else{
return false;
}
e.obj = null;
}
}
});
}
//加载后立即执行
lazyLoading();
//执行滚动，触发事件
$(window).bind("scroll", lazyLoading);
};
})(jQuery);
看完demo感觉不错，先整过来再说