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

javascript_javascript スキルに基づいた画像の遅延読み込みの実装

WBOY

リリース： 2016-05-16 15:21:45

オリジナル

1189 人が閲覧しました

1. 定義

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

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

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

3. 基本手順

【1】Webページ上のすべての写真を同じ写真に設定します
【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>

ログイン後にコピー

上記がこの記事の全内容です。これが皆さんの学習に役立ち、JavaScript 画像の遅延読み込みを正常に実装できることを願っています。