Rumah > Artikel > hujung hadapan web > Pramuat imej berdasarkan kemahiran javascript_javascript

Pramuat imej berdasarkan kemahiran javascript_javascript

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

1. Definisi
Pramuat imej ialah cara yang baik untuk meningkatkan pengalaman pengguna Ia memuatkan imej yang diperlukan oleh pengguna terlebih dahulu untuk memastikan imej diterbitkan dengan cepat dan lancar, supaya pengguna boleh mendapatkan pengalaman pengguna yang lebih baik apabila menyemak imbas tapak web. Biasa digunakan dalam aplikasi seperti galeri gambar.
[Nota]Jika pemuatan segera digunakan, memuatkan imej yang dimuatkan bersama-sama kandungan lain halaman akan meningkatkan masa pemuatan keseluruhan halaman, jadi lebih sesuai menggunakan tetingkap .onload.
2. Dua idea
1. Gunakan imej latar belakang
Gunakan pramuat imej latar belakang untuk elemen halaman yang tidak berguna

<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.list li{
  height: 0;
  width: 0;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<ul class="list">
  <li id="preload1"></li>
  <li id="preload2"></li>
  <li id="preload3"></li>
  <li id="preload4"></li>
</ul>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
function preLoadImg(){
  preload1.style.background = "url('img/img1.gif')";
  preload2.style.background = "url('img/img2.gif')";
  preload3.style.background = "url('img/img3.gif')";
  preload4.style.background = "url('img/img4.gif')";
}
window.onload = function(){
  preLoadImg();  
}
</script>
</body>

2. Gunakan Imej()
Cipta teg a1f02c36ba31691bcfe87b2722de723b melalui Image() baharu atau document.createElement('img'), dan kemudian muatkan imej melalui a1f02c36ba31691bcfe87b2722de723bsrc pernyataan tugasan

<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
var aImages = [];
function preLoadImg(array){
  for(var i = 0, len = preLoadImg.arguments[0].length; i < len; i++){
    aImages[i] = new Image();
    aImages[i].src = preLoadImg.arguments[0][i];
  }
}
window.onload = function(){
  preLoadImg(array);  
}
</script>
</body>

3. acara onload
Menggunakan acara onload imej, anda boleh mengetahui dengan tepat sama ada imej itu benar-benar dimuatkan dan kemudiannya boleh melakukan satu siri operasi pada imej, seperti mendapatkan lebar, ketinggian dan indeks sebenar imej semasa, dsb.
[Nota 1] Pernyataan tugasan src bagi imej mesti diletakkan selepas peristiwa pemuatan imej. Jika tidak, ia mungkin berlaku bahawa imej telah dimuatkan tetapi pengikatan acara belum selesai

<button>载入图片</button>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
  preLoadImg('img/test.png');
}
function preLoadImg(url){
  var oImg = document.createElement('img');
  //在本机环境下，IE8-浏览器下oImg的onload事件放在src后面将无法载入图片
  oImg.src = url;
  oImg.onload = function(){
    document.body.appendChild(oImg);
    oImg.onload = null;
    oImg = null;
  }      
}
</script>

[Nota 2] Atribut onload bagi objek Imej merujuk kepada objek fungsi tanpa nama, dan fungsi tanpa nama merujuk kepada objek Imej melalui skopnya Rujukan pekeliling ini akan menyebabkan kebocoran memori dalam IE6 patut dilepaskan.
【Tulisan rekursif】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
var oImg = document.createElement('img');
var iDown = 0;  
preLoadImg();
function preLoadImg(){
  oImg.onload = function(){
    iDown++;
    alert('第' + iDown + '张图片的宽:' + this.width + ' 高:' + this.height);
    if(iDown < array.length){
      preLoadImg();
    }else{
      oImg.onload = null;
      oImg = null;
    }
  }
  oImg.src = array[iDown];            
}
</script>
</body>
</html>

[Pertimbangkan cara penulisan yang lebih lengkap onerror]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
var iDown = 0;
var oImage = new Image();
function preLoadImg(arr){
  function loadImgTest(arr){
    iDown++;
    if(iDown < arr.length){
      preLoadImg(arr);
    }else{
      alert('ok');
      oImg.onload = null;
      oImg = null;      
    }
  }
  oImage.onload = function(){
    loadImgTest(arr);
  };
  oImage.onerror = function(){
    loadImgTest(arr);
  };  
  oImage.src = arr[iDown];
}
preLoadImg(array);
</script>
</body>
</html>

【Tulisan gelung】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
function preLoadImg(arr,callback){
  var aImages = [];
  var iDown = 0;
  for(var i = 0; i < arr.length; i++){
    aImages[i] = new Image();
    aImages[i].onload = function(){
      loadImgTest(arr,callback);
    };
    aImages[i].onerror = function(){
      loadImgTest(arr,callback);
    };    
    aImages[i].src = arr[iDown];
  }
  function loadImgTest(arr,callback){
    iDown++;
    if(iDown == arr.length){
      alert('ok');
      callback && callback.call(aImages);    
    }
  }  
}
preLoadImg(array,function(){
  console.log(this[0].width);
});
</script>
</body>
</html>
应用：预加载模糊变清晰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 500px;
  height: 500px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="#" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var arrayB = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"];
var arrayL = ["img/img1.jpg","img/img2.jpg","img/img3.jpg","img/img4.jpg"];
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = arrayL[iNow];
  aftLoadImg(arrayB,oImg0);
}

var aImages = [];
window.onload = function(){
  preLoadImg(arrayL);  
}
function preLoadImg(arr){
  for(var i = 0, len = arr.length; i < len; i++){
    aImages[i] = new Image();
    aImages[i].src = arr[i];
  }
}
function aftLoadImg(arr,obj){
  var oImg = new Image();
  oImg.onload = function(){
    obj.src = arr[iNow];
  }
  oImg.src = arr[iNow];
}
</script>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

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：js untuk menentukan pelayar mana untuk membuka kemahiran page_javascript semasaArtikel seterusnya：js untuk menentukan pelayar mana untuk membuka kemahiran page_javascript semasa

Artikel berkaitan

Lihat lagi