웹 프런트엔드 최적화 스크롤 지연 로딩 이미지 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;
        }
   


   

   

여기에서는 코드를 더 간단하고 간단하게 만들기 위해 jqury 프레임워크를 사용합니다. 이 기능을 구현하려면 순수 js 코드를 직접 작성할 수 있는 것이 가장 좋습니다. 모든 js 프레임워크를 사용합니다. 하지만 저는 개인적으로 jquery 프레임워크를 선호합니다. 결국 대규모 프로젝트에서 순수 js 코드를 직접 작성하면 전체 프로젝트의 진행 속도가 심각하게 느려질 것입니다. 강력한 js 프레임워크를 앞에 두고 합리적으로 사용하면 여전히 개발 효율성이 향상될 수 있습니다. 대규모 프로젝트에서 jquery는 이 작은 기능을 구현하는 데 도움을 줄 수 있을 뿐만 아니라 Ajax처럼 쉽게 수행할 수 있도록 도와줍니다. 또한 여기서는 이 이미지 로드를 코딩했습니다. 실제로 Ajax를 사용하여 새 이미지를 요청한 다음 이를 페이지에 로드해야 합니다. 가능한 한 단순하게 유지하고 싶기 때문에 관련된 배경 논리는 없습니다. , 그래서 이 사진만 로드합니다.

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

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