JavaScript는 페이지 스크롤 이미지 로딩을 구현합니다.
- 高洛峰원래의
- 2016-11-25 11:43:251077검색
이 글을 쓰는 이유는 무엇인가요?
1. 페이지를 최적화하는 것은 매우 실용적인 방법이고 기술적인 구현도 어렵지 않습니다.
2. 관련 내용이 있는 기사를 검색해 보니 모두 jQuery를 사용하는 것 같습니다. 방법인데, 웹마스터가 jQuery를 사용하지 않는다면 이 방법을 쓰면 안 될까요?
3. 기술을 공유하면 프로젝트에서 실제로 사용한 적이 없기 때문에 더 많은 사람들이 테스트를 도울 수 있습니다. 궁금한 점이 있으면 지적해 주세요.
4. 이번 달 블로그는 아직 작성하지 않았습니다.
5. 방금. 과제가 없어서 지금까지는 더 쓰지 않겠습니다. ..
현재 페이지의 대부분은 Taobao와 같이 콘텐츠가 풍부하고 사진이 더 많다는 특징이 있습니다. , Jingdong, 우리가 자주 탐색하는 공동구매 웹사이트(저는 온라인 쇼핑 컨트롤입니다. 한 달 동안 온라인으로 돈을 쓰지 않으면 재미가 없습니다) 한 페이지에 수십 장의 사진이 있으므로 지금은 널리 사용되는 방법은 롤링 동적 로딩입니다. 이 방법은 많은 양의 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 ? innerHeight : document.documentElement.clientHeight
목적: 창의 문서 표시 영역의 높이와 너비를 픽셀 단위로 선언합니다.
DOM 표준: innerheight 및 innerwidth;
IE 표준: document.documentElement 또는 대안으로 document.body의 clientWidth 및 clientHeight 속성(DTD 관련) 3.obj.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop목적: 페이지 요소의 위치를 가져옵니다. 브라우저가 웹킷 커널이 아닌 경우 document.body.scrollTop 값은 항상 0입니다. . 올바른 값을 얻으려면 document.documentElement.scrollTop을 사용하세요. 브라우저가 웹킷 커널인 경우 document.documentElement.scrollTop 값은 항상 0입니다. document.body를 사용하세요. 저도 DTD와 관련된 구문을 검색했습니다(즉, 페이지에서 DOCTYPE을 사용하는 경우 document.documentElement를 사용하고 페이지에 DOCTYPE을 지정하지 않는 경우 document.body를 사용함). 그것을 지적하는 데 도움이 될 것입니다. 정말 감사합니다. 세부정보: 1. 실제 주소는 초기에 특정 속성에 있기 때문에(기본값은 xsrc, 직접 설정할 수 있음) 기본 이미지 주소가 최고입니다. 빨간색을 피할 수 있는 1픽셀의 투명한 이미지 여기에 로드해야 할 사진이 있습니다. 좋은 사용자 경험은 프런트 엔드가 항상 추구하는 것입니다(예제에 반영됨). . 이미지가 성공적으로 로드된 후 적절한 표시 효과를 추가할 수 있습니다(예제에는 반영되지 않았으므로 직접 시도해 볼 수 있습니다). ----------- ------------- ----------- ------------- ----------- ------------- --- 자바스크립트 소스 코드는 다음과 같습니다.
var scrollLoad = (function (options) {
var defaults = (arguments.length == 0) ? { src: 'xSrc', 시간: 300} : { src: options.src || 'xSrc', time: options.time ||300};
var camelize = 함수(들) {
return s.replace(/-(w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
};
this.getStyle = 함수(요소, 속성) {
if (arguments.length != 2) return false;
var value = element.style [camelize(속성)];
if (!value) {
if (document.defaultView && document.defaultView.getCompulatedStyle) {
var cs s = document.defaultView .getCompulatedStyle(element, null);
값 = CSS ? css.getPropertyValue(property) : null;
} else if (element.currentStyle) {
value = element.currentStyle[camelize(property)];
}
}
반환 값 == 'auto' ? '' : value;
};
var _init = function () {
var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,
offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),
docImg = 문서. 이미지 ,
_len = docImg.length;
if (!_len) return false;
for (var i = 0; i
var attrSrc = docImg[i].getAttribute(defaults.src),
o = docImg[i], tag = o.nodeName.toLowerCase();
만약 ( 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 offsetPage && postWindow
if (tag === "img" && attrSrc !== null) {
o.setAttribute("src", attrSrc );
}
o = null;
}
}
};
window.onscroll = 기능 () {
~ . }, defaults.time);
🎜>데모 download
는 설정할 매개변수를 전달할 수 있습니다. src 원래 주소 및 응답 시간
scrollLoad({
src:'userSrc', //문자열 유형
time: 100 //숫자 유형
})