Rumah >hujung hadapan web >tutorial js >Melaksanakan pemuatan malas imej berdasarkan kemahiran javascript_javascript

Melaksanakan pemuatan malas imej berdasarkan kemahiran javascript_javascript

WBOYasal: 2016-05-16 15:21:451194semak imbas

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>

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>

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Tetingkap pop timbul mudah alih jQuery dan pengetahuan lapisan pop timbul summary_jqueryArtikel seterusnya：Tetingkap pop timbul mudah alih jQuery dan pengetahuan lapisan pop timbul summary_jquery

Artikel berkaitan

Lihat lagi