자바스크립트를 기반으로 이미지 지연 로딩 구현하기-JS 튜토리얼-php.cn

자바스크립트를 기반으로 이미지 지연 로딩 구현하기

高洛峰

풀어 주다： 2016-12-27 15:30:09

원래의

1186명이 탐색했습니다.

1. 정의

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

2. 프리젠테이션 양식

【1】로드 지연, 로드 전에 사용자가 나가면 당연히 로드되지 않도록 setTimeout 또는 setInterval을 사용합니다.
【2】조건부 로딩, 특정 조건이 충족되거나 특정 조건이 트리거될 때만 비동기 로딩이 시작됩니다.
【3】가시 영역 로드는 사용자가 볼 수 있는 영역만 로드합니다. 이는 주로 스크롤 막대를 모니터링하여 구현됩니다. 일반적으로 사용자가 볼 수 있는 하단 가장자리에 매우 가까울 때 로드가 시작됩니다. 사용자가 이미지를 아래로 당길 때 이미지가 표시된다는 점입니다. 이미지는 이미지를 선택하고 오랫동안 정지되지 않습니다.

3. 기본 단계

【1】웹 페이지의 사진을 동일한 사진으로 설정
【2】data-original = "img/test.jpg"를 그림 속성, 그림의 실제 주소 저장
【3】특정 조건이 발생하면 자동으로 이 영역에 있는 그림의 src 속성을 실제 주소로 변경합니다

4. 애플리케이션

1. 버튼을 클릭하면 이미지가 표시됩니다

<!DOCTYPE html>
<html>
<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(&#39;button&#39;)[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>
<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>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>  
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
  <li><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>              
</ul>
 
<script>
var oBtn = document.getElementsByTagName(&#39;button&#39;)[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: &#39;&#39;; 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>

로그인 후 복사

위 내용이 이 글의 전체 내용이기를 바랍니다. 이는 모든 사람의 학습에 도움이 될 것이며 자바스크립트 이미지 게으름 로드를 성공적으로 구현하는 데 도움이 될 것입니다.

JavaScript 기반 이미지 지연 로딩과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!