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

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

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

2. 지연 로딩의 구현 원리

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

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

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

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의 사진으로 바꿉니다.

아아아앙

Paste_Image.png

Paste_Image.png

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