집 > 기사 > 웹 프론트엔드 > javascript_javascript 기술을 기반으로 이미지 지연 로딩 구현

javascript_javascript 기술을 기반으로 이미지 지연 로딩 구현

WBOY원래의: 2016-05-16 15:21:451145검색

1. 정의

이미지 로딩 지연은 지연 로딩이라고도 하며, 특정 조건이 충족될 때 특정 이미지만 로딩하는 것입니다. 일반적으로 이미지가 많은 웹 페이지에 사용됩니다. 요청 수를 줄이거나 요청 수를 지연하여 성능을 최적화할 수 있습니다.

2. 발표양식

【1】 로딩 지연, 로딩을 지연하려면 setTimeout 또는 setInterval을 사용하세요. 로딩 전에 사용자가 나가면 자연스럽게 로딩되지 않습니다.
【2】조건부 로딩, 비동기 로딩은 특정 조건이 충족되거나 특정 조건이 트리거될 때만 시작됩니다.
[3] 시각적 영역 로딩은 사용자가 볼 수 있는 영역만 로드합니다. 이는 주로 스크롤 막대를 모니터링하여 구현되며 일반적으로 사용자가 볼 수 있는 하단 가장자리에 매우 가까울 때 로딩을 시작합니다. 사용자가 아래로 당길 때 연결되면 긴 일시 중지가 발생하지 않습니다.

3. 기본 단계

【1】웹페이지의 모든 사진은 동일한 사진으로 설정되어 있습니다
【2】이미지에 data-original = "img/test.jpg" 속성을 추가하고 이미지의 실제 주소를 저장합니다
【3】특정 조건이 발생하면 해당 지역 이미지의 src 속성을 실제 주소로 자동 변경합니다

4. 신청

1. 버튼을 클릭하면 사진이 표시됩니다

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  height: 100px;
  width: 100px;
}
</style>
</head>
<body>
<button>加载图片</button>
<img src="#" alt="测试" data-original = "img/test.png">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg = document.images[0];  
oBtn.onclick = function(){
  oImg.src = "img/loading.gif";
  if(oImg.dataset){
    aftLoadImg(oImg,oImg.dataset.original);  
  }else{
    aftLoadImg(oImg,oImg.getAttribute("data-original"));
  }
}
function aftLoadImg(obj,url){
  var oImg = new Image();
  oImg.onload = function(){
    obj.src = oImg.src;
  }
  oImg.src = url;
}
</script>  
</body>
</html>

2. 시각적 영역에 사진 표시

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
img{
  border: none;
  vertical-align: middle;
}
.in{
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  height: 400px;
  width: 400px;
  float: left;
}
.in img{
  height: 400px;
  width: 400px;
}
</style>
</head>
<body>
<ul class="list">
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>  
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
  <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>              
</ul>

<script>
var oBtn = document.getElementsByTagName('button')[0];
var aImages = document.images;
loadImg(aImages);
window.onscroll = function(){
  loadImg(aImages);
};
function loadImg(arr){
  for( var i = 0,len = arr.length; i < len; i++){
    if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
      arr[i].isLoad = true;
      arr[i].style.cssText = "transition: ''; opacity: 0;"
      if(arr[i].dataset){
        aftLoadImg(arr[i],arr[i].dataset.original);  
      }else{
        aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
      }
      (function(i){
        setTimeout(function(){
          arr[i].style.cssText = "transition: 1s; opacity: 1;"
        },16)
      })(i);
    }
  }
}
function aftLoadImg(obj,url){
  var oImg = new Image();
  oImg.onload = function(){
    obj.src = oImg.src;
  }
  oImg.src = url;
}

</script>  
</body>
</html>

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되고 자바스크립트 이미지의 지연 로딩을 성공적으로 구현하는 데 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery Mobile 팝업창 및 팝업 레이어 지식 summary_jquery다음 기사：jQuery Mobile 팝업창 및 팝업 레이어 지식 summary_jquery

javascript_javascript 기술을 기반으로 이미지 지연 로딩 구현

관련 기사