Maison > Article > interface Web > Implémentation du chargement paresseux d'images basé sur les compétences javascript_javascript

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

WBOYoriginal: 2016-05-16 15:21:451149parcourir

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>

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Fenêtre contextuelle jQuery Mobile et couche contextuelle de connaissances summary_jqueryArticle suivant：Fenêtre contextuelle jQuery Mobile et couche contextuelle de connaissances summary_jquery

Articles Liés

Voir plus