jquery 지연 로딩 구현 및 맨 위로 돌아가기

이 글에서는 jquery의 지연 로딩을 상단으로 구현하는 방법을 설명합니다.

창의 가시 범위(브라우저의 위쪽 가장자리와 아래쪽 가장자리 사이, 육안으로 볼 수 있음)에 요소가 나타나는지 확인하는 방법.

function isVisible($node){    var winH = $(window).height(), 
        winS = $(window).scrollTop(),
        nodeHeight = $node.height(),
        nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight){            return true;
        }else{            return false;
        }
}

를 구현하려면 isVisible 함수를 작성하세요. 창이 스크롤될 때 요소가 창의 가시 범위에 나타나는지 여부를 결정합니다. 발생할 때마다 콘솔에 true를 인쇄합니다. 코드를 사용하여

function isVisible($node){
    $(window).on('scroll',function(){        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){            console.log(true);
        }else{            console.log(false);
        }
    });
}

isVisible($node);

구현하기 창이 스크롤될 때 요소가 창의 가시 범위에 나타나는지 여부를 결정합니다. 요소가 처음 나타날 때 콘솔에 true를 인쇄하고 다시 나타날 때 처리가 수행되지 않습니다. 코드를 사용하여 이미지의

function isVisible($node){
    $(window).on('scroll',function(){        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){            if(!$node.attr("data-sc")){                console.log(true);
                $node.attr("data-sc",true); 
            }else{                return;
            }
        }else{            return;
        }
    });
}
isVisible($node);

지연 로딩을 구현하는 원리는 무엇입니까?

페이지가 로드되면 페이지의 img 주소를 작고 동일한 흰색 이미지로 지정하고 다음과 같이 생성된 사용자 정의 속성에 실제 이미지 주소를 입력합니다.

<img src="small.png" data-src="true.png">

src는 작은 이미지 주소인 data-src입니다. 실제 주소입니다.
창의 보이는 영역에 이미지가 나타날 때 src에 custom 속성의 실제 이미지 주소를 할당하는 것이 지연 로딩의 구현 원리입니다.

이 기사에서는 jquery에 대해 설명합니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 참고하세요.

관련 권장 사항:

이것에 대한 관련 질문

JS 배열, 문자열 및 수학 함수

JS 시간 개체 및 재귀 문제 정보

위 내용은 jquery 지연 로딩 구현 및 맨 위로 돌아가기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!