JavaScript로 페이지 스크롤 이미지 로딩 구현(Lazyload 효과 모방)

JavaScript로 페이지 스크롤 이미지 로딩 구현(Lazyload 효과 모방)_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:04:42

원래의

1186명이 탐색했습니다.

이 기사를 쓰는 이유는 무엇입니까?
1. 페이지를 최적화하는 것은 매우 실용적인 방법이고 기술적 구현도 어렵지 않습니다
2. 관련 내용이 있는 기사를 검색해 보니 모두 jQuery를 사용하는 것 같은데, 웹마스터가 그렇게 한다면; jQuery를 사용하지 않는데, 이 방법을 사용할 수 없나요?
3. 기술을 공유하는 것도 프로젝트에서 실제로 사용한 적이 없기 때문에 더 많은 사람들이 테스트할 수 있도록 돕기 위한 것입니다. 궁금한 점이 있으면 지적해 주세요.
4. 아직 이번 달 블로그를 작성하지 않았습니다.
5. 업무가 없습니다. .지금 쓰지 않으면 언제 기다리겠습니까...

현재 페이지의 대부분에는 다음과 같은 기능이 있습니다. Taobao, JD.com, 공동 구매 웹사이트와 같은 풍부한 콘텐츠와 많은 사진이 있습니다. 자주 탐색합니다(저는 온라인 쇼핑을 좋아합니다. 온라인에서 한 달 동안 돈을 쓰지 않으면 기분이 좋지 않습니다). 수십 장의 사진이 있는 페이지를 drizzle이라고 부르므로 현재 인기 있는 방법은 롤링 동적 로딩입니다. 이 방법은 많은 양의 HTTP 요청을 해결할 수 있습니다. 먼저 페이지는 창 표시 영역의 그림만 로드합니다. 이 방법으로 웹 페이지는 페이지가 스크롤되어 해당 위치로 스크롤될 때까지 기다립니다. 로드 속도가 빨라집니다. (요청이 적고, 로드가 너무 적다면 언급하지 않으시겠어요?) "고성능 웹사이트 구축 가이드"의 첫 번째 장에서 우리는 HTTP 요청을 줄이는 것이 웹페이지의 프런트엔드 성능을 향상하고 페이지 로딩 속도를 최적화하는 매우 실용적인 방법이라고 언급했습니다.

원리:
1. 페이지에 스크롤 이벤트를 바인딩합니다.
2. 페이지를 로드할 때 실제 이미지 주소를 입력합니다.
3. 요소가 현재 브라우저 창에 들어가는지 여부,
4. 마지막으로 이미지를 로드할지는 사용자의 몫입니다.

난이도:
브라우저 호환성이 어려운 이유는 DOM 표준과 IE 표준이 매일 처리되기 때문입니다. 다음 코드 부분을 고려하세요.
1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop
목적: 창 표시 영역의 왼쪽 상단을 기준으로 현재 페이지의 Y 위치를 가져옵니다. .
DOM 표준 :window.pageYOffset;
IE 표준: window.document.documentElement.scrollTop
　2.window.innerHeight? window.innerHeight: document.documentElement.clientHeight
용도: 높이 선언 창의 문서 표시 영역과 너비(픽셀 단위)
DOM 표준: 내부 높이 및 내부 너비
IE 표준: document.documentElement 또는 ducument.body의 clientWidth 및 clientHeight 속성(DTD 관련) 대안
　3.obj.getBoundingClientRect ().top window.document.documentElement.scrollTop window.document.body.scrollTop
목적: 페이지 요소의 위치를 가져옵니다.
브라우저가 아닌 경우. -webkit 커널, document.body.scrollTop 값은 항상 0입니다. 올바른 값을 얻으려면 document.documentElement.scrollTop을 사용하세요.
브라우저가 webkit core인 경우 document.documentElement.scrollTop 값은 항상 0입니다. document를 사용하세요. .body;
다음과 같은 구문도 검색했습니다. DTD와 관련이 있습니다(즉, 페이지에 DOCTYPE이 지정되어 있으면 document.documentElement를 사용하고, 페이지가 DOCTYPE을 지정하지 않으면 document.body를 사용하세요). 아는 친구들이 지적해 줄 수 있을 거라 확신합니다. 정말 감사합니다.
세부정보:
1. 실제 주소는 초기에 특정 속성(기본값은 xsrc, 직접 설정할 수 있음)에 있으므로 기본 이미지 주소는 1픽셀 투명 이미지가 가장 좋습니다. 브라우저 오류 방지(예제에 반영됨)
3. 이미지가 성공적으로 로드된 후 적절한 표시 효과를 추가할 수 있습니다(예제에는 반영되지 않았으므로 직접 시도해 볼 수 있습니다). >자바스크립트 소스코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다

 
var scrollLoad = (function (options) { 
var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 300} : { src: options.src || 'xSrc', 시간: options.time ||300}; 
var camelize = function (s) { 
return s.replace(/-(w)/g, function (strMatch, p1) { 
return p1.toUpperCase(); 
}); 
}; 
this.getStyle = function (element, property) { 
if (arguments.length != 2) return false; >var value = element.style[camelize(property)]; 
if (!value) { 
if (document.defaultView && document.defaultView.getCompulatedStyle) { 
var css = document.defaultView.getComputeStyle (요소, null); 
value = css ? css.getPropertyValue(property) : null 
} else if (element.currentStyle) { 
value = element.currentStyle[camelize(property)]; 🎜>} 
} 
반환 값 == 'auto' ? '' : value; 
} 
var _init = function() { 
var offsetPage = window.pageYOffset pageYOffset : window.document.documentElement.scrollTop, 
offsetWindow = offsetPage Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight), 
docImg = document.images, 
_len = docImg.length ; 
if (!_len)이 false를 반환하면; 
for (var i = 0; i < _len; i ) { 
var attrSrc = docImg[i].getAttribute(defaults.src), 
o = docImg[i], tag = o. nodeName.toLowerCase(); 
if (o) { 
postPage = o.getBoundingClientRect().top window.document.documentElement.scrollTop window.document.body.scrollTop; postWindow = postPage Number(this.getStyle(o, 'height').replace('px', '')); 
if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) { 
if (tag === "img" && attrSrc !== null) { 
o.setAttribute("src", attrSrc); 
} 
o = null; 
} 
} 
}; 
window.onscroll = function () { 
setTimeout(function () { 
_init(); 
}, defaults.time); 
} 
}; 
return _init(); 
}); 
scrollLoad(); 

 
可传递一个参数设置src原地址和响应时间 

复主代码代아래 내용:

scrollLoad({

src:'userSrc'， //字符串型 
time: 100 //数字型 
}) 

 

데모다운로드