圖片延遲技術一般的思路
1.現將img元素對應的src路徑設置為背景圖片，而該img所對應的url路徑存放在一個自設的屬性中（以便進行src替換）。
2.獲取捲軸的高度和窗口的高度
3循環需要延遲加載的img數組，獲取img的高度，判斷該元素是否在可視窗口內。若該元素在可視窗口內，則進行src替換
一下為測試代碼
html
複製代碼代碼如下:
<style>
.wrap {
margin: 20px auto;
width: 150px;
}
.wrap div {
border: 1px dotted #E29808;
height: 30px;
line-height: 30px;
margin: 5px auto;
text-align: center;
width: 150px;
}
.wrap .sortable {
background-color: #E6D6AB;
border: 1px solid #E29808;
}
#showImg li{
width:30%;
margin-left:2%;
margin-top:15px;
height:300px;
float:left;
background:#CCC;
}
#showImg li:nth-child(3n){
margin-left:3%;
}
#showImg li img{
width:100%;
max-height:100%;
}
</style>
</head>
<body>
<div id="showImg">
<li><img src="http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg" /></li>
<li><img src="http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg" /></li>
<li><img src="http://i2.sinaimg.cn/gm/2011/0127/U5238P115DT20110127111837.jpg" /></li>
</div>
</body>
js部分
複製代碼代碼如下:
var imgsglobal=[
"http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg",
"http://img4.duitang.com/uploads/item/201306/07/20130607172438_Teijr.jpeg",
"http://cdn.duitang.com/uploads/item/201306/08/20130608190311_BYwcA.thumb.600_0.jpeg",
"http://g-ec4.images-amazon.com/images/G/28/BOOK-Catalog/Liaoxiaojun/B003U5TATY_01_AMZN.jpg",
"http://www.yishun.net/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg",
"http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAzMi9UMkVHbF9YaVhjWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg",
"http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg",
"http://img4.duitang.com/uploads/item/201304/29/20130429142901_SQjJv.thumb.600_0.jpeg",
"http://img4.duitang.com/uploads/item/201112/04/20111204170801_fiBKm.jpg",
"http://img2.duitang.com/uploads/item/201211/06/20121106233027_LdQaS.thumb.600_0.jpeg",
"http://i2.sinaimg.cn/gm/2011/0127/U5238P115DT20110127111837.jpg",
"http://img2.duitang.com/uploads/item/201209/24/20120924162953_hLPJe.jpeg",
"http://wenwen.soso.com/p/20110624/20110624085901-745594320.jpg",
"http://img4.duitang.com/uploads/item/201206/15/20120615185646_uzmrt.thumb.600_0.jpeg",
"http://img4.duitang.com/uploads/item/201202/11/20120211213039_U4Sj8.thumb.600_0.jpg",
"http://cdn.duitang.com/uploads/item/201201/25/20120125145922_n4Vz8.thumb.600_0.jpg"
];
function addImgEle(){
var str='';
for(var i=0, len=imgsglobal.length; i<len; i++){
str+='<li><img src="wait" resrc="'+imgsglobal[i]+'" /></li>'
}
$("#showImg").append(str);
}
$(document).ready(function(){
addImgEle();
});
(function(win){
var lazyLoad=win['lazyLoad']||{};
var camelize = function (s) {
return s.replace(/-(/w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
};
lazyLoad={
init:function(ImgClass){
var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,
offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight);
var Imgeles=ImgClass;
for(var i=0, len=Imgeles.length; i<len; i++){
if(Imgeles[i].getAttribute("resrc")=="show"){
continue;
}
var o=Imgeles[i];
if(o){
postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop +window.document.body.scrollTop;
postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));
if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)){
var src=o.getAttribute("resrc");
o.setAttribute("src", src);
o.setAttribute("resrc", "show");
}
}
}
},
getStyle:function (element, property) {
if (arguments.length != 2) return false;
var value = element.style[camelize(property)];
if (!value) {
if (document.defaultView && document.defaultView.getComputedStyle) {
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(property) : null;
} else if (element.currentStyle) {
value = element.currentStyle[camelize(property)];
}
}
return value == 'auto' ? '' : value;
}
}
win.lazyLoad=lazyLoad;
})(window);
$(document).ready(function(){
lazyLoad.init($("img.lazyImg"));
window.onscroll=function (){
lazyLoad.init($("img.lazyImg"));
}
});