웹 페이지 전단 최적화 스크롤 지연 그림 예제 불 러 오기

왜 불 러 오 는 시간 을 끌 었 습 니까?페이지 를 불 러 올 때 모든 그림 을 표시 하면 되 지 않 습 니까?쓸데없는 짓 을 할 필요 가 있 습 니까?답 은 긍정 적 이다.불 러 올 그림 이나 내용 이 많 을 때 한 번 에 불 러 오 면 전체 페이지 가 오래 불 러 옵 니 다.이것 은 사용자 가 오래 기 다 려 야 한 다 는 것 을 의미 합 니 다.이것 은 사용자 에 게 우호 적 이지 않 습 니 다.어쩌면 너 는 또 물 어 볼 지도 모 르 니,그러면 페이지 를 나 누 면 되 지 않 겠 니?사실 이런 스크롤 지연 로드 기술 은 다음 페이지 를 수 동 으로 클릭 하 는 페이지 기술 을 대체 하 는 데 쓰 인 다.페이지 를 바 꿀 때마다 사용자 가 한 번 클릭 해 야 하 는 것 도 사용자 에 게 우호 적 이지 않다.그래서 스크롤 지연 로드 가 생 겼 습 니 다.
내 가 여기에 그림 을 불 러 오 는 것 을 예 로 들 면 바 이 두 그림 에 있 는 것 처럼 네가 아래로 굴 러 가면 다음 페이지 의 그림 이 계속 표 시 될 것 이다.
요 구 는 이 렇 습 니 다.예 를 들 어 저 는 20 장의 그림 을 불 러 오 려 고 합 니 다.페이지 로 딩 이 끝 난 후에 5 장 을 불 러 오 겠 습 니 다.(전 제 는 5 장 이 브 라 우 저 창 높이 를 차지 했다 는 것 입 니 다)스크롤 바 가 브 라 우 저 밑 으로 굴 러 갈 때 5 장 을 불 러 옵 니 다.모두 4 번 불 러 옵 니 다.
원 리 는 이 렇 습 니 다.현재 브 라 우 저의 창 높이 a 를 가 져 온 다음 에 페이지 에 스크롤 바 스크롤 이 벤트 를 연결 합 니 다.스크롤 바 가 굴 러 갈 때 먼저 20 장 을 불 러 왔 습 니 다.20 장 보다 작 으 면 현재 문서 의 상단 높이 b 와 그림 내용 의 높이 c 를 가 져 옵 니 다.a+b>=c 라면 5 장의 그림 을 계속 불 러 옵 니 다.
나 는 가능 한 한 적은 코드 와 가능 한 한 간단 한 demo 로 필요 한 사람 에 게 강력 한 기능 을 보 여 주 는 것 을 좋아한다 고 말 했다.모든 것 의 원 리 는 간단 하기 때문에 간단 한 demo 일수 록 이해 하고 받 아들 이기 쉽다.그래서 코드 가 매우 적 고 코드 에 직접 올 라 갑 니 다.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>          </title>
    <style type="text/css">
        body {
            margin: 0px;
        }
        ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <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();
                    }
                }
            });
        });
        function loadimg() {
            for (i = 0; i < 5; i++) {
                $("#content").append("<li><img src='1.jpg'/></li>");
            }
            n += 5;
        }
    </script>
</head>
<body>
    <ul id="content">
    </ul>
</body>
</html>

여기 서 jqury 프레임 워 크 를 사용 한 것 은 코드 를 더욱 적 고 간단 하 게 하기 위해 서 입 니 다.만약 에 순수한 js 코드 를 손 으로 써 서 이 기능 을 실현 할 수 있다 면 가장 좋 지만 최적화 이기 때문에 이 작은 기능 도 그 어떠한 js 프레임 워 크 에 도 사용 할 필요 가 없습니다.그러나 개인 적 으로 jquery 프레임 워 크 를 좋아 합 니 다.큰 프로젝트 에서 손 으로 쓴 순수한 js 코드 는 전체 프로젝트 의 진 도 를 심각하게 늦 출 것 입 니 다.강력 한 js 프레임 워 크 가 앞 에 놓 여 있 습 니 다.합 리 적 으로 운용 하면 개발 효율 을 높 일 수 있 습 니 다.그리고 큰 프로젝트 에서 jquery 는 이 작은 기능 만 실현 할 수 있 는 것 이 아 닙 니 다.예 를 들 어 Ajax 와 같 습 니 다.가볍게 풀 면 해결 해 줄 수 있어.그리고 저 는 이 그림 을 불 러 오 는 것 을 죽 었 을 뿐 입 니 다.사실은 Ajax 를 사용 하여 새로운 그림 을 요청 한 다음 에 페이지 에 불 러 오 는 것 이 어야 합 니 다.가능 한 한 간단 하려 면 배경 논리 와 관련 되 지 않 기 때문에 이 그림 만 불 러 옵 니 다.
이 코드 를 알 수 있 습 니 다:docTop+winHeight>=contentHeight-10,여기 서 제 가 왜-10 을 해 야 합 니까?만약 에-10 이 IE,Firefox 에서 테스트 를 통과 하지 않 으 면 크롬 에서 통과 할 수 없습니다.크롬 에서 docTop+winHeight 는 영원히 content Height 보다 1 이 작 기 때 문 입 니 다.앞의 두 브 라 우 저 에서 docTop+winHeight 는 content Height 보다 1 이 큽 니 다.이것 은 브 라 우 저의 문제 입 니 다.우 리 는 그것들 을 호 환 할 수 밖 에 없습니다.가장 간단 한 방법 은 끝까지 굴 러 가 는 것 이 아 닙 니 다.아래쪽 에 10 개의 픽 셀 이 있 을 때 새 그림 을 불 러 올 수 있 습 니 다.
원본 프로젝트 코드 가 필요 합 니까?

웹 페이지 전단 최적화 스크롤 지연 그림 예제 불 러 오기

좋은 웹페이지 즐겨찾기