그림 지연 기술에 대한 일반적인 아이디어
1. 이제 IMG 요소에 해당하는 SRC 경로를 배경 이미지로 설정하고 IMG에 해당하는 URL 경로는 자체 설정 속성 (SRC 교체 용)에 저장됩니다.
2. 릴의 높이와 창의 높이를 얻으십시오.
3 루핑에는 IMG 배열의 지연로드가 지연되고 IMG 높이를 얻고 요소가 시각적 창에 있는지 확인해야합니다. 요소가 볼 수있는 창에있는 경우 SRC가 교체됩니다.
테스트 코드는 다음과 같습니다
HTML
코드 사본은 다음과 같습니다.
<스타일>
.포장하다 {
마진 : 20px 자동;
너비 : 150px;
}
. 드래프 {
테두리 : 1px 점선 #e29808;
높이 : 30px;
라인 높이 : 30px;
마진 : 5px 자동;
텍스트 정렬 : 센터;
너비 : 150px;
}
.wrap .sortable {
배경색 : #e6d6ab;
국경 : 1px 고체 #e29808;
}
#showimg li {
너비 : 30%;
마진 왼쪽 : 2%;
마진-탑 : 15px;
높이 : 300px;
플로트 : 왼쪽;
배경 : #CCC;
}
#showimg li : nth-Child (3n) {
마진 왼쪽 : 3%;
}
#showimg li img {
너비 : 100%;
최대 높이 : 100%;
}
</스타일>
</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 부분
코드 사본은 다음과 같습니다.
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/tuysl3r1exnpbwcwmy50yw9iyw9jzg4uy29tl2ltz2vv4dhjhl2kzlzc0mdy1mdazmi9umkvhbf9yavhjwfhywfis3nda2ndawmz.2ndawmz.
"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-74594320.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 = "대기"resrc = "'+imgsglobal [i]+'" /> < /li>'
}
$ ( "#showimg"). Append (str);
}
$ (document) .ready (function () {
addimgele ();
});
(기능 (WIN) {
var lazyload = win [ 'lazyload'] || {};
var camelize = function (s) {
S.Replace (/-(/w)/g, function (strmatch, p1) {Return
p1.touppercase ()를 반환합니다.
});
};
lazyload = {
init : function (imgclass) {
var offsetpage = window.pageyoffset.
OffsetWindow = OffSetPage + 번호 (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 + humber (this.getstyle (o, 'height'). 교체 ( 'px', ''));
if (((연기> 오프셋 피지 && 후기 페이지 <offsetwindow) || (postwindow> offsetpage && postwindow <offsetwindow)) {
var src = O.getAttribute ( "resrc");
O.SetAttribute ( "SRC", SRC);
O.setattribute ( "resrc", "show");
}
}
}
},
getStyle : 함수 (요소, 속성) {
if (arguments.length! = 2) false를 반환합니다.
var value = element.style [camelize (property)];
if (! value) {
if (document.defaultView && document.defaultView.getComputedStyle) {
var css = document.defaultView.getComputedStyle (요소, null);
value = css? css.getPropertyValue (property) : null;
} else if (element.currentStyle) {
value = element.currentStyle [Camelize (Property)];
}
}
return value == 'auto' ': 값;
}
}
win.lazyload = lazyload;
})(창문);
$ (document) .ready (function () {
lazyload.init ($ ( "img.lazyimg");
window.onscroll = function () {
lazyload.init ($ ( "img.lazyimg");
}
});