Idées générales et exemples de compétences js image delay technology_javascript

Idées générales sur la technologie de retard d'image

1. Définissez maintenant le chemin src correspondant à l'élément img comme image d'arrière-plan, et le chemin URL correspondant à l'img est stocké dans un attribut auto-défini (pour le remplacement src) .

2. Obtenez la hauteur du défilement et la hauteur de la fenêtre

3 Parcourez le tableau img qui doit être chargé avec retard, obtenez la hauteur de l'img et déterminez si le L'élément se trouve dans la fenêtre visuelle. Si l'élément est dans la fenêtre visuelle, remplacez src

par le code de test

html

Copier le code Le code est le suivant :

>< ;li> ;li> ; >< ;li> div>



partie js




Copier le code


Le code est comme suit :

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/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k 0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn. 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. " 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; 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 ? window.pageYOffset : window.document.documentElement.scrollTop,
offsetWindow = offsetPage Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight);
for(var i=0, len=Imgeles.length; iif(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("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);
valeur = css ? css.getPropertyValue(property) : null;
} else if (element.currentStyle) {
value = element.currentStyle[camelize(property)];
}
}
valeur de retour == 'auto' ? '' : valeur;
}
}
win.lazyLoad=lazyLoad;
})(fenêtre);
$(document).ready(function(){
lazyLoad.init($("img.lazyImg"));
window.onscroll=function (){
lazyLoad.init($ ("img.lazyImg"));
}
});