js Images_javascript 기술의 지연 로딩을 위한 구현 방법 및 아이디어

대략적인 구현 방법은 다음과 같습니다.
페이지 로드가 시작되기 전에 지정된 ID를 가진 요소의 모든 img를 imgs에 넣고 모든 그림의 src 값을 새로 생성된 _src 속성에 넣고 설정합니다. src를 지정된 디스플레이 이미지로 보냅니다.
그런 다음 document.body의 스크롤 이벤트가 트리거되면 루프는 imgs의 img 요소 위치가 브라우저 표시 상자 내에 있는지 여부를 계산합니다. 그렇다면 img 요소의 _src 속성 값은 다음과 같습니다. src에 할당됩니다. 이렇게 하면 사진이 표시됩니다.
여기서 더 까다로운 부분은 img의 위치를 ​​계산하고 페이지를 기준으로 요소의 절대 위치를 구하는 방법입니다. 일반적으로 OffsetLeft 및 offsetTop이 사용되지만 이 두 속성은 요소의 offsetParent가 가리키는 요소의 상대 위치입니다. offsetParent가 가리키는 요소가 부동으로 설정되거나 절대 위치 지정을 사용하는 경우 offsetLeft는 절대 위치를 얻는 데 올바르지 않습니다.
여기에서는 요소의 모든 상위 요소에 대한 offsetTop의 합을 사용하여 문서의 절대 위치를 얻습니다.

코드 복사 코드는 다음과 같습니다.

//의 절대 X 위치를 가져옵니다. 페이지의 요소
var getLeft = function(El){
        var left = 0;
             do{
                                    ' );
                     왼쪽으로 돌아가기{
             상단 = El. offsetTop; 🎜> 창의 스크롤 이벤트를 설정할 때 IE는 document.documentElement를 사용하고 다른 브라우저는 document를 사용합니다.
다음 단계는 문서를 기준으로 브라우저 표시 창의 현재 위치를 가져오는 것입니다. 다음 코드는




코드 복사

코드는 다음과 같습니다.

//스크롤바 위치 및 브라우저 창 표시 크기 읽기
            var top = isGoo document.body.scrollTop? : document.documentElement.scrollTop,
                                                                          > 🎜>

Google Browse 브라우저는 body를 통해 scrollTop을 가져와야 하고, 다른 브라우저는 documentElement를 통해 scrollTop을 가져와야 합니다. 최종 반복에서는 img의 위치를 ​​결정하고 이미지를 표시합니다 코드 복사

코드는 다음과 같습니다. 🎜>

//모든 이미지를 일괄 처리하여 해당 이미지가 브라우저 표시 영역 내에 있는지 확인
for(var i=0; i < imgs.length; i){
var _top = getTop(imgs [i]),_left = getLeft(imgs[i]);
                                                                                   ~                       > _top <= 상단 높이 &&
_left <= 왼쪽 너비){
var _src = imgs[i].getAttribute( '_src');
사진이 표시되었으니 과제를 취소하세요
                 if (imgs[i].src !== _src){
                                           > 🎜>예 코드 실행




코드 복사

코드는 다음과 같습니다

>

>

>

>

>

>

>

>