js圖片延遲技術一般的思路與範例_javascript技巧

圖片延遲技術一般的思路

1.現將img元素對應的src路徑設定為背景圖片，而該img所對應的url路徑存放在一個自設的屬性中（以便進行src替換）。

2.取得捲軸的高度和視窗的高度

3循環需要延遲載入的img數組，取得img的高度，判斷該元素是否在視覺視窗內。若該元素在可視窗口內，則進行src替換

一下為測試代碼

html

複製代碼 程式碼如下:

🎜>

複製程式碼

程式碼如下:

var imgsglobal=[
"http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg",http .duitang.com/uploads/item/201306/07/20130607172438_Teijr.jpeg",
"http://cdn.duitang.com/uploads/item/201306/08/201306081990.0819 🎜>“http://g-ec4.images-amazon.com/images/G/28/BOOK-Catalog/Liaoxiaojun/B003U5TATY_01_AMZN.jpg”，
“http://www.yishun.net/tuysL3R1eNpltL3R1eNpltL3R HL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn .jpg",
"http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAMi9UML2ltZ2V4dHJhL2kzLzc0MDY1MDAMi9UMNVHbWFHIJh. 🎜>「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 / 04/20111204170801_fiBKm.jpg",
"http://img2.duitang.com/uploads/item/201211/06/20121106233027_LdQaS.thumb.c. 。 cn/gm/2011/0127/U5238P115DT20110127111837.jpg",
"http://img2.duitang.com/uploads/item/201209/24/2012092416295." soso.com/p/20110624/20110624085901-745594320.jpg",
"http://img4.duitang.com/uploads/item/201206/15/201206151856461518564615/201206151856461518563_jpm> http://img4.duitang.com/uploads/item/201202/11/20120211213039_U4Sj8.thumb.600_0.jpg",
"http://cdn.duitang.com/uploads/item/2
"http://cdn.duitang.com/uploads/item/201201/20512025125125251n .thumb.600_0.jpg"
];
function addImgEle(){
var str='';
for(var i=0, len=imgsglobal.length; istr ='

'
}
$(" #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 : windowopdocument. docum
offsetWindow = offsetPage Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight);
var Imgeles=ImgClass;
for(var i=0, len=Imgeles.length; iif(Imgeles[i].getAttribute("resrc")=="show"){
繼續;
}
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 offsetPage && postWindow var src=o.getAttribute("resrc");
o.setAttribute("src", src);
o.setAttribute("resrc", "show");
}
}
}
},
getStyle:function (元素, 屬性) {
if (arguments.length != 2) return false;
var value = element.style[camelize(property)];
if (!value) {
if (document.defaultView && document.defaultView.getCompulatedStyle) {
var css = document.defaultView.getCompulatedStyle(element, null);
Value=CSS？
} else if (element.currentStyle) {
value = element.currentStyle[camelize(property)];
}
}
傳回值 == 'auto' ? ''：價值；
}
}
win.lazyLoad=lazyLoad;
})(視窗);
$(document).ready(function(){
lazyLoad.init($("img.lazyImg"));
window.onscroll=function (){
lazyLoad.init($ ("img.lazyImg"));
}
});