Melaksanakan pemuatan malas imej berdasarkan kemahiran javascript

Melaksanakan pemuatan malas imej berdasarkan kemahiran javascript_javascript

WBOY

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

asal

1204 orang telah melayarinya

1. Definisi

Pemuatan tertunda imej juga dipanggil pemuatan malas Ia melambatkan memuatkan imej atau hanya memuatkan imej tertentu apabila syarat tertentu dipenuhi. Ia biasanya digunakan untuk halaman web dengan banyak imej. Anda boleh mengurangkan bilangan permintaan atau menangguhkan bilangan permintaan untuk mengoptimumkan prestasi.

2. Borang pembentangan

【1】Pemuatan tertunda, gunakan setTimeout atau setInterval untuk menangguhkan pemuatan Jika pengguna keluar sebelum memuatkan, ia secara semula jadi tidak akan dimuatkan.
【2】Pemuatan bersyarat, pemuatan tak segerak bermula hanya apabila syarat tertentu dipenuhi atau syarat tertentu dicetuskan.
[3] Pemuatan kawasan visual hanya memuatkan kawasan yang boleh dilihat oleh pengguna Ini terutamanya dilaksanakan dengan memantau bar skrol Secara umumnya, ia mula dimuatkan apabila ia sangat dekat dengan tepi bawah yang dilihat oleh pengguna disambungkan apabila pengguna menarik ke bawah , tidak akan ada jeda yang lama.

3. Langkah asas

【1】Semua gambar pada halaman web ditetapkan kepada gambar yang sama
【2】Tambahkan atribut data-original = "img/test.jpg" pada imej dan simpan alamat sebenar imej
【3】Apabila keadaan tertentu dicetuskan, tukar atribut src imej di kawasan itu secara automatik kepada alamat sebenar

4. Permohonan

1 Klik butang untuk memaparkan gambar

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

Salin selepas log masuk

2. Paparkan gambar dalam kawasan visual

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

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu pembelajaran semua orang dan berjaya melaksanakan pemuatan malas imej javascript.