画像遅延技術の一般的なアイデア
1.次に、IMG要素に対応するSRCパスを背景画像として設定し、IMGに対応するURLパスはセルフセット属性（SRC置換用）に保存されます。
2。リールの高さと窓の高さを取得します
3ループには、IMGアレイの負荷が遅れ、IMGの高さを取得し、要素が視覚ウィンドウにあるかどうかを判断する必要があります。要素が表示可能なウィンドウにある場合、SRCが交換されます。
これがテストコードです
HTML
コードコピーは次のとおりです。
<style>
。包む {
マージン：20px Auto;
幅：150px;
}
.wrap div {
境界線：1px点線＃e29808;
高さ：30px;
Line-Height：30px;
マージン：5px Auto;
テキストアライグ：センター;
幅：150px;
}
.wrap .sortable {
バックグラウンドカラー：＃e6d6ab;
境界線：1pxソリッド＃e29808;
}
#showimg li {
幅：30％;
マージン左：2％;
マージントップ：15px;
高さ：300px;
フロート：左;
背景：#ccc;
}
#showimg li：nth-child（3n）{
マージン左：3％;
}
#showimg li img {
幅：100％;
Max-Height：100％;
}
</style>
</head>
<body>
<div id = "showimg">
<li> <img src = "http://img4.duitang.com/uploads/item/201306/08/0130608190125_3kfty.jpeg"/> </li>
<li> <img src = "http://cdn.duitang.com/uploads/item/201306/07/0130607171626_QKC3T.Thumb.600_0.jpeg"/> </li>
<li> <img src = "http://i2.sinaimg.cn/gm/2011/0127/u5238p115dt2011012711837.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/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NT AwMzIuanBn.jpg",
"http://www.yishun.net/tuysl3r1exnpbwcwmy50yw9iyw9jzg4uy29tl22ltz2v4dhjhl2kzlzc0mdy1mdazmi9umkvhbf9yavhjwfhfhfise3nda.pise3ndavndavndaivhjwfhfhfise3ndaivhjwfhfhfise3n.jwfhfhfise3nda
"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/20112204170801_fibkm.jpg"、
"http://img2.duitang.com/uploads/item/201211/06/20121106233027_ldqas.thumb.600_0.jpeg"、
"http://i2.sinaimg.cn/gm/2011/0127/u5238p115dt2011012711837.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"
];
関数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）{
s.Replace（/ - （/w）/g、function（strmatch、p1）を返す{
p1.touppercase（）を返します。
}）;
};
lazyload = {
init：function（imgclass）{
var offsetpage = windo.pageyoffset.pageyoffset：windocument.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"）{
続く;
}
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'）。置換（ '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）falseを返します。
var value = element.style [camelize（property）];
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（property）];
}
}
return value == 'auto' ''：value;
}
}
win.lazyload = lazyload;
}）（ウィンドウ）;
$（document）.ready（function（）{
lazyload.init（$（ "img.lazyimg"））;
window.onscroll = function（）{
lazyload.init（$（ "img.lazyimg"））;
}
}）;