이미지가 너무 많은 사용 시나리오의 경우 페이지 로딩 속도를 높이고 사용자 경험을 개선하기 위해 그렇지 않은 이미지는 로드하지 않습니다. 시야 내에서 로드하기 전에 시야에 나타날 때까지 기다리십시오.
- 구현 원리는 매우 간단합니다. 먼저 img의 src를 작은 그림으로 지정하고 실제 주소를 지정합니다. 사진은 img에 저장됩니다. 사용자 정의 속성 , 에서 이미지가 시야 내에 나타날 때까지 기다립니다. img 요소를 가져오고 src를 변경합니다. 값은 src에 할당됩니다.
function isShow($el){ var winH = $(window).height(),//获取窗口高度 scrollH = $(window).scrollTop(),//获取窗口滚动高度 top = $el.offset().top;//获取元素距离窗口顶部偏移高度 if(top < scrollH + winH){ return true;//在可视范围 }else{ return false;//不在可视范围 } }
$(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)//设置时间是为了更好的看出效果 }; }); }
위 내용은 jQuery가 지연 로딩을 구현하는 방법을 자세히 설명하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!