Perkongsian pelbagai kaedah pelaksanaan pramuat imej js_kemahiran javascript

Secara amnya terdapat beberapa cara untuk pramuat imej

1.html teg atau imej memuatkan css

Jelas sekali kami boleh pramuat imej menggunakan teg img atau melalui atribut imej latar belakang teg tersebut. Tetapi untuk mengelakkan memuatkan terlalu banyak gambar untuk kali pertama dan menjejaskan pengalaman. Biasanya yang terbaik adalah untuk memuatkan dokumen selepas dokumen itu diberikan (menggunakan window.onload, dsb.).

2. Js tulen untuk melaksanakan pramuat

Javascript Empty City Plan-Code melaksanakan pramuat imej Contoh pramuat lengkap ialah

function preloadimages(arr){  
  var newimages=[], loadedimages=0
  var postaction=function(){} //此处增加了一个postaction函数
  var arr=(typeof arr!="object")? [arr] : arr
  function imageloadpost(){
    loadedimages++
    if (loadedimages==arr.length){
      postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
    }
  }
  for (var i=0; i<arr.length; i++){
    newimages[i]=new Image()
    newimages[i].src=arr[i]
    newimages[i].onload=function(){
      imageloadpost()
    }
    newimages[i].onerror=function(){
      imageloadpost()
    }
  }
  return { //此处返回一个空白对象的done方法
    done:function(f){
      postaction=f || postaction
    }
  }
}

Prinsipnya adalah untuk mencipta objek Imej dalam gelung, tetapkan src objek kepada imej yang ditentukan, dan kemudian pantau penyiapan pemuatan imej onload = function(){imageloadpost()}. , imageloadpost akan dilaksanakan. Ternyata IE6 masih menghadapi masalah: jika imej pramuat sudah ada dalam ingatan, acara img.onload tidak akan dicetuskan lagi. Tetapi IE7+ tiada masalah. Tiada masalah dengan penyemak imbas lain, jadi acara mendengar img.onload di atas tidak mempunyai masalah keserasian.

3.Ajax melaksanakan pramuat

Permintaan Ajax boleh meminta sebarang data, dan gambar tidak terkecuali. Mari lihat pramuat js/css

// XHR to request a JS and a CSS 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.js'); 
    xhr.send(''); 
    xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.css'); 
    xhr.send(''); 

Pramuat ajax imej sebenarnya sama dengan pramuat imej js tulen

new Image().src = "http://domain.tld/preload.png"; 

Cuma, penjelasan di sini ialah pemuatan ajax. Ia boleh difahami bahawa imej baharu adalah semua permintaan dapatkan ajax.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk memahami pramuat imej js.