구현 효과 : 스크롤 바가 아래로 당겨지면 이미지가 가시 영역에 나타나고로드를 시작합니다.
아이디어 :
(1) IMG 태그, Lazy-SRC와 같은 속성에 실제 이미지 주소를 넣으십시오.
(2) 페이지에서 IMG 높이를 가져옵니다 (JQ, Offset (). 상단), 기본적으로 :
img.getBoundingClientRect (). top + document.body.scrolltop || document.documentElement.scrolltop
(3) IMG가 나타나는 위치가 가시 영역에 있는지 확인하십시오.
. 브라우저의 가시 영역, JustTop> scrolltop && offsetTop <(ScrollTop+WindowHeight), 여기서 JustTop은 이미지의 오프셋+이미지 높이입니다.
코드 사본은 다음과 같습니다.
// 문서를 변수로 저장하여 문서화로 쿼리를 줄입니다
var doc = 문서;
for (var n = 0, i = this.oimg.length; n <i; n ++) {
// 이미지 자리 표시 자 이미지 주소를 가져옵니다
var hsrc = this.oimg [n] .getAttribute (this.sholder_src);
if (hsrc) {
var scrolltop = doc.body.scrolltop || doc.documentElement.scrolltop,
WindowHeight = Doc.DocumentELement.ClientHeight,
OffsetTop = this.oimg [n] .getBoundingClientRect (). top + scrolltop,
imgheight = this.oimg [n] .ClientHeight,
JustTop = OffsetTop + imgeight;
// 사진이 보이는 영역에 있는지 확인
if (justTop> scrollTop && offsetTop <(scrollTop+windowheight)) {
this.isload (hsrc, n);
}
}
}
다음은 자세한 코드입니다.
코드 사본은 다음과 같습니다.
함수 lgy_imgscrollload (옵션) {
this.oimg = document.getElementById (옵션 .wrapid) .getElementsByTagName ( 'IMG');
this.sholder_src = 옵션 .holder_src;
this.int ();
}
lgy_imgscrollload.prototype = {
loadimg : function () {
// 문서를 변수로 저장하여 문서화로 쿼리를 줄입니다
var doc = 문서;
for (var n = 0, i = this.oimg.length; n <i; n ++) {
// 이미지 자리 표시 자 이미지 주소를 가져옵니다
var hsrc = this.oimg [n] .getAttribute (this.sholder_src);
if (hsrc) {
var scrolltop = doc.body.scrolltop || doc.documentElement.scrolltop,
WindowHeight = Doc.DocumentELement.ClientHeight,
OffsetTop = this.oimg [n] .getBoundingClientRect (). top + scrolltop,
imgheight = this.oimg [n] .ClientHeight,
JustTop = OffsetTop + imgeight;
// 사진이 보이는 영역에 있는지 확인
if (justTop> scrollTop && offsetTop <(scrollTop+windowheight)) {
// alert (offsetTop);
this.isload (hsrc, n);
}
}
}
},
ISLOAD : 기능 (SRC, N) {
var src = src,
n = n,
o_img = new image (),
_that = this;
o_img.onload = (function (n) {
_that.oimg [n] .setattribute ( 'src', src);
_that.oimg [n] .removeattribute (_that.sholder_src);
})(N);
o_img.src = src;
},
int : function () {
this.loadimg ();
var _that = this,
타이머 = null;
// 스크롤 : loadImg 함수에 대한 빈번한 호출을 방지하기 위해 타이머 추가
window.onscroll = function () {
클리어 타임 아웃 (타이머);
타이머 = settimeout (function () {
_that.loadimg ();
}, 100);
}
}
}
생식 이미지 :
위는이 기사에 관한 것입니다. 구현 효과는 JQuery 플러그인의 구현 효과보다 나쁘지 않습니다. 코드가 더 간단합니다. 참조하십시오.