Implémentation du chargement paresseux d'images basé sur les compétences javascript

Implémentation du chargement paresseux d'images basé sur les compétences javascript_javascript

WBOY

Libérer： 2016-05-16 15:21:45

original

1204 Les gens l'ont consulté

1. Définition

Le chargement différé des images est également appelé chargement paresseux. Il retarde le chargement des images ou ne charge que certaines images lorsque certaines conditions sont remplies. Il est généralement utilisé pour les pages Web contenant de nombreuses images. Vous pouvez réduire le nombre de requêtes ou retarder le nombre de requêtes pour optimiser les performances.

2. Formulaire de présentation

【1】Chargement retardé, utilisez setTimeout ou setInterval pour retarder le chargement. Si l'utilisateur quitte avant le chargement, il ne se chargera naturellement pas.
【2】 Chargement conditionnel, le chargement asynchrone ne démarre que lorsque certaines conditions sont remplies ou que certaines conditions sont déclenchées.
[3] Le chargement de la zone visuelle charge uniquement la zone que l'utilisateur peut voir. Ceci est principalement mis en œuvre en surveillant la barre de défilement. Généralement, le chargement commence lorsqu'elle est très proche du bord inférieur que l'utilisateur voit. est connecté lorsque l’utilisateur descend, il n’y aura pas de longue pause.

3. Étapes de base

【1】Toutes les images de la page Web sont définies sur la même image
【2】Ajoutez l'attribut data-original = "img/test.jpg" à l'image et enregistrez la véritable adresse de l'image
【3】Lorsque certaines conditions sont déclenchées, remplacez automatiquement l'attribut src de l'image dans la zone par l'adresse réelle

4. Candidature

1. Cliquez sur le bouton pour afficher l'image

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

Copier après la connexion

2. Afficher les images dans la zone visuelle

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

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun et à la mise en œuvre réussie du chargement paresseux des images javascript.