Idées générales pour la technologie des retards d'image
1. Définissez maintenant le chemin SRC correspondant à l'élément IMG comme image d'arrière-plan, et le chemin d'url correspondant à l'IMG est stocké dans un attribut auto-établi (pour le remplacement SRC).
2. Obtenez la hauteur de la bobine et la hauteur de la fenêtre
3 La boucle nécessite un chargement retardé du tableau IMG, obtenir la hauteur de l'IMG et déterminer si l'élément est dans la fenêtre visuelle. Si l'élément est dans la fenêtre visualisable, SRC est remplacé.
Voici le code de test
html
La copie de code est la suivante:
<style>
.envelopper {
marge: 20px automatique;
Largeur: 150px;
}
.wrap div {
Border: 1px pointillé # E29808;
hauteur: 30px;
hauteur de ligne: 30px;
marge: 5px automatique;
Texte-aligne: Centre;
Largeur: 150px;
}
.Wrap. Sortable {
Color d'arrière-plan: # E6D6AB;
Border: 1px solide # e29808;
}
#showimg li {
Largeur: 30%;
marge-gauche: 2%;
marge: 15px;
hauteur: 300px;
flottant: à gauche;
Contexte: #ccc;
}
#showimg li: nth-child (3n) {
marge-gauche: 3%;
}
#showimg li img {
Largeur: 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.duuitang.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>
</docy>
partie js
La copie de code est la suivante:
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/tuysl3r1Exnpbwcwnc50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2k0lzc0mdy1mdazmi9uml9hbmvyrhwfhywfhfhfise3nda2nt awmziuUMBin.J
"http://www.yishun.net/tuysl3r1Exnpbwcwmy50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2kzlzc0mdy1mdazmi9umkvhbf9yavhjwfhfhfise3nda2n tawmziuuuu
"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"
]]
fonction addImGele () {
var str = '';
pour (var i = 0, len = imgsglobal.length; i <len; i ++) {
str + = '<li> <img src = "wait" resrc = "' + imgsglobal [i] + '" /> </li>'
}
$ ("# showImg"). Ajouter (str);
}
$ (document) .ready (function () {
addImGele ();
});
(fonction (win) {
var lazyload = win ['lazyload'] || {};
var camelize = fonction (s) {
return s.replace (/ - (/ w) / g, fonction (strmatch, p1) {
retour p1.touppercase ();
});
};
Lazyload = {
init: function (imgclass) {
var offSetPage = window.pageyoffset?
OFFSetWindow = OffsetPage + Number (Window.InnerHeight? Window.InnerHeight: document.DocumentElement.ClientHeight);
var imgeles = imgClass;
pour (var i = 0, len = imgeles.length; i <len; i ++) {
if (imgeles [i] .getAttribute ("resrc") == "show") {
continuer;
}
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'). Remplace ('PX', ''));
if ((postpage> offSetPage && postpage <offsetwindow) || (postwindow> offSetPage && postwindow <offSetWindow)) {
var src = o.getAttribute ("resrc");
o.setAttribute ("src", src);
O.SetAttribute ("Resrc", "Show");
}
}
}
},
getStyle: fonction (élément, propriété) {
if (arguments.length! = 2) return false;
var valeur = élément.style [camelize (propriété)];
if (! valeur) {
if (document.defaultView && document.defaultView.getCompuledStyle) {
var css = document.defaultView.getCompuledStyle (élément, null);
Valeur = CSS?
} else if (element.currentStyle) {
valeur = élément.currentStyle [camelize (propriété)];
}
}
Retour Valeur == 'Auto'?
}
}
win.lazyload = lazyload;
})(fenêtre);
$ (document) .ready (function () {
lazyload.init ($ ("img.lazyImg"));
window.onscroll = function () {
lazyload.init ($ ("img.lazyImg"));
}
});