Implémentation du chargement paresseux d'images basé sur javascript-js tutoriel-php.cn

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

高洛峰

Libérer： 2016-12-27 15:30:09

original

1196 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 le chargement de certaines images uniquement lorsque certaines conditions sont remplies. 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 visible 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, il commence à se charger lorsqu'elle est très proche du bord inférieur que l'utilisateur voit. que l'image s'affiche lorsque l'utilisateur la tire vers le bas. Elle reprend simplement et il n'y aura pas de longue pause.

3. Étapes de base

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

4. Application

1. Cliquez sur le bouton pour afficher l'image

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

Copier après la connexion

2. Affichez l'image dans la zone visuelle

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

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article, j'espère. cela sera utile à l'apprentissage de chacun et à la mise en œuvre réussie du chargement de paresse d'image javascript.

Pour plus d'articles liés au chargement paresseux d'images basés sur javascript, veuillez faire attention au site Web PHP chinois !