Allgemeine Ideen für Bildverzögerungstechnologie
1. Setzen Sie nun den SRC-Pfad, der dem IMG-Element als Hintergrundbild entspricht, und der URL-Pfad, der dem IMG entspricht, wird in einem selbstsatzgelegten Attribut gespeichert (für SRC-Austausch).
2. Holen Sie sich die Höhe der Rolle und die Höhe des Fensters
3 Schleifen erfordert eine verzögerte Belastung des IMG -Arrays, erhalten Sie die Höhe von IMG und bestimmen, ob sich das Element im visuellen Fenster befindet. Wenn sich das Element im angezeigten Fenster befindet, wird SRC ersetzt.
Hier ist der Testcode
html
Die Codekopie lautet wie folgt:
<Styles>
.wickeln {
Rand: 20px Auto;
Breite: 150px;
}
.Wrap div {
Grenze: 1PX gepunktet #e29808;
Höhe: 30px;
Zeilenhöhe: 30px;
Rand: 5px Auto;
Text-Align: Mitte;
Breite: 150px;
}
.Wrap .sortierbar {
Hintergrundfarbe: #e6d6ab;
Grenze: 1PX Solid #e29808;
}
#showimg li {
Breite: 30%;
Margin-Links: 2%;
Rand: 15px;
Höhe: 300px;
float: links;
Hintergrund: #CCC;
}
#showimg li: n-te-Kind (3n) {
Margin-Links: 3%;
}
#showimg li img {
Breite: 100%;
maximal hohe: 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 Teil
Die Codekopie lautet wie folgt:
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/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NT AwMzIuanBn.jpg",
"http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAzMi9UMkVHbF9YaVhjWFhYWFhfISE3NDA2N TAwMzIuanBn.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"
];
Funktion addimgele () {
var str = '';
für (var i = 0, len = imgsglobal.length; i <len; i ++) {
STR+= '<li> <img src = "Wait" resrc = "'+imgsglobal [i]+'" /> < /li>' '
}
$ ("#showimg"). append (str);
}
$ (Dokument) .Ready (function () {
Addimgele ();
});
(Funktion (Win) {
var lazyload = win ['Lazyload'] || {};
var camelize = function (s) {
Return s.Replace (/-(/w)/g, Funktion (strmatch, p1) {
return p1.touppercase ();
});
};
Lazyload = {
init: function (imgclass) {
var OffsetPage = Fenster.PageyOffset?
OffsetWindow = OffsetPage + Nummer (Fenster.InnerHeight? Window.InnerHeight: document.documentElement.clientHeight);
var imgeles = imgclass;
für (var i = 0, len = imgeles.length; i <len; i ++) {
if (iMgeles [i] .getAttribute ("resrc") == "show") {
weitermachen;
}
var o = imgeles [i];
if (o) {
postpage = o.getBoundingClientRect (). Top + window.document.documentElement.scrolltop + window.document.body.scrolltop;
postwindow = postpage + number (this.getStyle (o, 'Höhe'). Ersetzen ('px', '');
if ((postpage> offsetpage && postpage <OffsetWindow) || (postwindow> offsetPage && postwindow <OffsetWindow)) {
var src = o.getAttribute ("resrc");
O.SetAttribute ("SRC", SRC);
O.SetAttribute ("resrc", "show");
}
}
}
},
GetStyle: Funktion (Element, Eigenschaft) {
if (Argumente.Length! = 2) return false;
var value = element.style [camelize (Eigenschaft)];
if (! value) {
if (document.defaultView && document.defaultview.getComputedStyle) {{
var CSS = document.DefaultView.getComputedStyle (Element, NULL);
Value = CSS?
} else if (element.currentStyle) {
value = element.currentStyle [camelize (Eigenschaft)];
}
}
Rückgabewert == 'Auto'? '': Wert;
}
}
win.lazyload = Lazyload;
})(Fenster);
$ (Dokument) .Ready (function () {
Lazyload.init ($ ("img.lazyimg"));
window.onscroll = function () {
Lazyload.init ($ ("img.lazyimg"));
}
});