JavaScriptに基づいた画像の遅延読み込みの実装-jsチュートリアル-php.cn

JavaScriptに基づいた画像の遅延読み込みの実装

高洛峰

リリース： 2016-12-27 15:30:09

オリジナル

1147 人が閲覧しました

1. 定義

画像の遅延読み込みは、画像の読み込みを遅らせること、または特定の条件が満たされた場合にのみ特定の画像を読み込むことを指し、通常、画像が大量にある Web ページで使用されます。リクエストの数を減らしたり、リクエストの数を遅らせたりして、パフォーマンスを最適化できます。

2. プレゼンテーションフォーム

【1】読み込みを遅らせるには、setTimeout または setInterval を使用します。読み込み前にユーザーが離脱すると、当然読み込みは行われません。
【2】条件付き読み込み、非同期読み込みは、特定の条件が満たされた場合、または特定の条件がトリガーされた場合にのみ開始されます。
【3】可視領域の読み込みは、主にスクロールバーを監視することによって実装されます。ユーザーがプルダウンすると画像が正しく接続され、長い停止は発生しません。

3. 基本手順

【1】Webページ内のすべての画像を同じ画像に設定します
【2】画像に属性data-original = "img/test.jpg"を追加し、実際のアドレスを保存します画像
【3】特定の条件がトリガーされると、領域内の画像のsrc属性を実際のアドレスに自動的に変更します

IV. ボタンをクリックして画像を表示します

<!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 画像の遅延読み込みを正常に実装できることを願っています。

JavaScript に基づく画像の遅延読み込みに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。