이번에는 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 관련 기사를 주목하세요!
관련 읽기:
WebStorm에 대한 사용자 설정을 사용자 정의하는 방법
위 내용은 jquery의 지연 로딩의 원리와 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!