Implementierung des verzögerten Ladens von Bildern basierend auf javascript_javascript-Kenntnissen-js-Tutorial-php.cn

Implementierung des verzögerten Ladens von Bildern basierend auf javascript_javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:21:45

Original

1212 Leute haben es durchsucht

1. Definition

Das verzögerte Laden von Bildern wird auch als verzögertes Laden bezeichnet oder lädt bestimmte Bilder nur dann, wenn bestimmte Bedingungen erfüllt sind. Es wird normalerweise für Webseiten mit vielen Bildern verwendet. Sie können die Anzahl der Anfragen reduzieren oder die Anzahl der Anfragen verzögern, um die Leistung zu optimieren.

2. Präsentationsform

【1】Verzögertes Laden, verwenden Sie setTimeout oder setInterval, um das Laden zu verzögern. Wenn der Benutzer vor dem Laden geht, wird es natürlich nicht geladen.
[2] Bedingtes Laden: Das asynchrone Laden beginnt nur, wenn bestimmte Bedingungen erfüllt sind oder bestimmte Bedingungen ausgelöst werden.
[3] Beim Laden des visuellen Bereichs wird nur der Bereich geladen, den der Benutzer sehen kann. Im Allgemeinen beginnt der Ladevorgang, wenn er sich sehr nahe am unteren Rand befindet, den der Benutzer sieht Wenn die Verbindung hergestellt ist, entsteht keine lange Pause.

3. Grundlegende Schritte

【1】Alle Bilder auf der Webseite sind auf das gleiche Bild eingestellt
【2】Fügen Sie dem Bild das Attribut data-original = „img/test.jpg“ hinzu und speichern Sie die tatsächliche Adresse des Bildes
【3】Wenn bestimmte Bedingungen ausgelöst werden, ändern Sie automatisch das src-Attribut des Bildes im Bereich in die tatsächliche Adresse

4. Bewerbung

1. Klicken Sie auf die Schaltfläche, um das Bild anzuzeigen

<!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>

Nach dem Login kopieren

2. Bilder im visuellen Bereich anzeigen

<!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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt und das verzögerte Laden von Javascript-Bildern erfolgreich implementiert.