웹 프런트엔드 최적화 스크롤 지연 로딩 이미지 example_jquery

로드가 지연되는 이유는 무엇인가요? 페이지가 로드될 때 모든 이미지를 표시하는 것이 더 좋지 않을까요? 이것이 필요한가? 대답은 '예'입니다. 로딩할 이미지나 콘텐츠의 양이 많은 경우, 한꺼번에 로딩하게 되면 전체 페이지를 로딩하는데 오랜 시간이 걸리게 되는데, 이는 사용자가 오랜 시간을 기다려야 한다는 것을 의미하며 이는 사용자 친화적이지 않습니다. 그냥 페이징을 하면 안되는 이유가 무엇인지 물어볼 수도 있습니다. 실제로 이 스크롤 지연 로딩 기술은 다음 페이지를 수동으로 클릭하는 것을 대체하는 데 사용되는 페이징 기술과 정확히 같습니다. 페이지가 변경될 때마다 사용자는 한 번만 클릭해야 하는데, 이는 사용자에게도 불친절합니다. 그렇기 때문에 롤링 지연 로딩이 발생합니다.

여기서는 Baidu Pictures처럼 사진 로딩을 예로 들었습니다. 아래로 스크롤하면 다음 페이지에도 계속해서 사진이 표시됩니다.

요구 사항은 다음과 같습니다. 예를 들어, 페이지가 로드된 후 5개의 사진을 먼저 로드합니다(단, 5개의 사진이 브라우저 창의 높이를 채웠습니다). 바를 브라우저 하단으로 스크롤하면 사진 5개를 더 로드하여 총 4개를 로드할 수 있습니다.

원칙은 먼저 현재 브라우저의 창 높이 a를 가져온 다음 스크롤 막대 스크롤 이벤트를 페이지에 바인딩하면 먼저 20장의 사진이 로드되었는지 판단합니다. 20개 이상의 사진, 그런 다음 현재 문서의 상단에서 높이 b를 구하고 이미지 내용의 높이 c를 구합니다. a b>=c이면 5개의 이미지를 계속 로드합니다.

필요한 사람들에게 강력한 기능을 보여주기 위해 가능한 한 적은 코드와 가능한 한 간단한 데모를 사용하는 것을 좋아한다고 말했습니다. 왜냐하면 모든 것의 원칙은 실제로 매우 간단하고 데모가 단순할수록 더 쉬워지기 때문입니다. 사람들이 그것을 이해하고 받아들이는 것입니다. 그래서 코드가 거의 없습니다. 코드를 직접 입력하세요:

   
   
   
   
    < ;script type="text/javascript">
        var n = 0;
        var winHeight = $(window).height();
        $(function () {
            loadimg();
            $(window).scroll(function () {
               if (n < 20) {
                  var docTop = $(document).scrollTop();
                    var contentHeight = $("# content").height();
                   if (docTop winHeight >= contentHeight - 10) {
                    loadimg();
                   }
                }
            });
        });
        함수 loadimg() {
            for (i = 0; 나는 < 5; i ) {
                $("#content").append("

");
            }
            n = 5;
        }
   

   

   

이 코드를 볼 수 있습니다: docTop winHeight >= contentHeight - 10, 여기서 -10을 원하는 이유는 무엇입니까? -10이 아닌 경우 테스트는 IE 및 Firefox에서는 통과하지만 Chrome에서는 작동하지 않습니다. Chrome에서는 docTop winHeight가 항상 contentHeight보다 1 작은 반면 처음 두 브라우저에서는 docTop winHeight가 contentHeight보다 작기 때문입니다. contentHeight가 1 더 큽니다. 이는 브라우저 문제입니다. 가장 간단한 방법은 아래쪽으로 스크롤하는 경우 새 이미지를 로드할 수 있습니다.

소스 엔지니어링 코드가 필요하십니까?