이미지의 지연 로딩을 구현하는 방법은 무엇입니까?

coldplay.xixi
풀어 주다: 2020-06-30 15:17:36
원래의
2994명이 탐색했습니다.

지연 로딩 구현 방법: 먼저 [data-imgurl]과 같은 속성을 사용자 정의하여 이미지 경로를 저장한 다음 js를 사용하여 인터페이스의 스크롤 위치 또는 이미지가 최종적으로 로드되었는지 확인합니다. 속성 [data-imgurl] src에 값을 할당하면 됩니다.

이미지의 지연 로딩을 구현하는 방법은 무엇입니까?

이미지의 지연 로딩을 구현하는 방법:

먼저 [data-imgurl]과 같은 속성을 사용자 정의하여 이미지 경로를 저장한 다음 js를 사용하여 인터페이스의 스크롤 위치 또는 이미지가 로드되었습니다. 그런 다음 [data-imgurl] 속성 값을 가져와서 src에 할당합니다.

이미지 로딩을 구현하기 위한 구체적인 방법은 다음과 같습니다:

$('img').each(function () {//在未触发滚动事件时先判断图片是否已经出现在视窗中,打开页面时先遍历一次
if (checkShow($(this)) && !isLoaded($(this)) ){ loadImg($(this));//加载当前img  } })
$(window).on('scroll',function () {//滚动的触发事件
        $('img').each(function () {//遍历img标签
            if (checkShow($(this)) && !isLoaded($(this)) ){
                loadImg($(this));//加载当前img
            }
        })
    })
function checkShow($img) {};// 定义checkShow函数判断当前img是否已经出现在了视野中,传入img对象
function isLoaded ($img) {};//定义isLoaded函数判断当前img是否已经被加载过了
function loadImg ($img) {};//定义loadImg函数加载图片
로그인 후 복사

1. 대상 라벨이 시야에 나타나는지 확인:

function checkShow($img) { // 传入img对象
        var sTop = $(window).scrollTop();  //即页面向上滚动的距离
        var wHeight = $(window).height(); // 浏览器自身的高度
        var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置
        if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
            return true;
        }
        return false;
    }
로그인 후 복사

2. 대상 라벨이 로드되었는지 확인:

 function isLoaded ($img) {
        return $img.attr(&#39;data-imgurl&#39;) === $img.attr(&#39;src&#39;); //如果data-imgurl和src相等那么就是已经加载过了
    }
로그인 후 복사

3. 로드 대상 태그:

  function loadImg ($img) {
        $img.attr(&#39;src&#39;,$img.attr(&#39;data-imgurl&#39;)); // 把自定义属性中存放的真实的src地址赋给src属性
    }
로그인 후 복사

관련 학습 권장 사항: javascript 비디오 튜토리얼

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!