<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<div style="width:500px; margin:10px auto; background-color:red">
<img class="piclist" onerror="imgpiclist(this);"src="http://image4.it168.com/2011/7/18/595a451c-724a-409a-b8a2-8a0c1c54101d.jpg" lazy-src="http://pic.66wz.com/0/00/99/16/991612_953793.jpg">
</div>
</BODY>
</HTML>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
(function($) {
$.fn.lazyLoad = function(options) {
//动态显示数据
var loading = function() {
var st = $(window).scrollTop(), sth = st + $(window).height(),post,posb;
$.each($('img.piclist'), function(i, data) {
var url = $(data).attr('lazy-src');
var o = $(this);
post = o.offset().top;
posb = post + o.height() - 100;
// var mm =$(data).attr('src')
// console.log(i+':'+mm+post+','+(post - 100)+','+(post - 100)+',st='+st+',sth='+sth+','+posb);
if ((post <=$(window).height()) || (post - 100 > st && post - 100 < sth) || (posb > st && posb < sth)) {
//在浏览器窗口内
//图片，改变src
$(data).attr("src", url);
if ($(data).width() > 440) {
if($(data).closest('fieldset').is('.tb-quote')){
$(data).width(400);
}else{
$(data).width(440);
};
}
$(this).removeAttr('lazy-src');
}
});
return false;
};
//事件触发
//加载完毕即执行
loading();
//滚动执行
$(window).bind('scroll resize load', loading);
};
})(jQuery);
function imgpiclist(img){
img.src='http://image4.it168.com/2011/7/18/595a451c-724a-409a-b8a2-8a0c1c54101d.jpg';
}
$('[lazy-src]').lazyLoad();
</SCRIPT>
|
免费注册
发表于 2011-12-22 08:54