jQuery가 지연 로딩을 구현하는 방법을 자세히 설명하세요.

PHPz
풀어 주다: 2017-04-04 13:44:05
원래의
2289명이 탐색했습니다.

1. 지연 로딩이 필요한 이유는 무엇입니까?

  • 이미지가 너무 많은 사용 시나리오의 경우 페이지 로딩 속도를 높이고 사용자 경험을 개선하기 위해 그렇지 않은 이미지는 로드하지 않습니다. 시야 내에서 로드하기 전에 시야에 나타날 때까지 기다리십시오.

2. 지연 로딩의 구현 원리

- 구현 원리는 매우 간단합니다. 먼저 img의 src를 작은 그림으로 지정하고 실제 주소를 지정합니다. 사진은 img에 저장됩니다. 사용자 정의 속성 , 에서 이미지가 시야 내에 나타날 때까지 기다립니다. img 요소를 가져오고 src를 변경합니다. 값은 src에 할당됩니다.

3. 지연 로딩 구현에 필요한 지식

(1) 창 상단에서 요소의 창, 창 스크롤 및 오프셋 높이를 가져오고 요소가 내부에 나타나는지 계산합니다. 창의 가시 범위 ;

jQuery가 지연 로딩을 구현하는 방법을 자세히 설명하세요.

Paste_Image.png

    function isShow($el){
      var winH = $(window).height(),//获取窗口高度
            scrollH = $(window).scrollTop(),//获取窗口滚动高度
            top = $el.offset().top;//获取元素距离窗口顶部偏移高度
      if(top < scrollH + winH){
          return true;//在可视范围
        }else{
          return false;//不在可视范围
        }
      }
로그인 후 복사
(2) 창 스크롤 이벤트 듣기 요소가 가시 범위 내에 있는지 확인하세요. Inside;
    $(window).on('scroll', function(){//监听滚动事件
        checkShow();
    })
    checkShow();
    function checkShow(){//检查元素是否在可视范围内
        $('img').each(function(){//遍历每一个元素
            var $cur = $(this);
            if(!!isloaded($cur)){return;}//判断是否已加载
            if (isShow($cur)) {
              setTimeout(function(){
                showImg($cur);
                },300)//设置时间是为了更好的看出效果
            };
        });
    }
로그인 후 복사
(3) 요소가 표시되면 이전 기본 사진을 src의 사진으로 바꿉니다.
아아아앙

jQuery가 지연 로딩을 구현하는 방법을 자세히 설명하세요.

Paste_Image.png

jQuery가 지연 로딩을 구현하는 방법을 자세히 설명하세요.

Paste_Image.png

위 내용은 jQuery가 지연 로딩을 구현하는 방법을 자세히 설명하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿