>  기사  >  웹 프론트엔드  >  jquery의 지연 로딩의 원리와 구현

jquery의 지연 로딩의 원리와 구현

php中世界最好的语言
php中世界最好的语言원래의
2018-03-09 15:19:562521검색

이번에는 jquery의 지연 로딩의 원리와 구현에 대해 알려드리겠습니다. jquery의 지연 로딩을 구현하기 위한 주의 사항은 무엇인가요? 다음은 실제 사례입니다.

지연 로딩의 원리

1. 코드 구현, 현재 뷰포트에 로드:

function isVisible($node){    var winH = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offSetTop = $(window).offSet().top;    if (offSetTop < winH + scrollTop) {        return true;
    } else {        return false;
    }
}

2. 브라우저가 스크롤할 때마다 요소가 나타나는지 확인할 수 있도록 브라우저의 eventlisteningfunction을 추가합니다. 창문이 보이는 범위 내에서:

$(window).on("scroll", function{    if (isVisible($node)){        console.log(true);
    }
})

3 어서 피카츄!

var hasShowed = false;
$(window).on("sroll",function{    if (hasShowed) {        return;
    } else {        if (isVisible($node)) {
            hasShowed = !hasShowed;            console.log(true);            //ajax请求刷新view层
        }
    }
})

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트Other 관련 기사를 주목하세요!

관련 읽기:

VUE-CLI @2.9.1 이상 버전의 문제

WebStorm에 대한 사용자 설정을 사용자 정의하는 방법

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.