各種jsイメージプリロード実装方法の共有_javascriptスキル

画像をプリロードするには通常、いくつかの方法があります

1.htmlタグまたはCSS読み込み画像

明らかに、img タグを使用するか、タグの background-image 属性を通じて画像をプリロードできます。ただし、初めて大量の写真をロードしてエクスペリエンスに影響を与えることを避けるためです。一般に、(window.onload などを使用して) ドキュメントがレンダリングされた後にドキュメントをロードすることが最善です。

2. プリロードを実装するための純粋な js

Empty City Plan コードの Javascript は画像のプリロードを実装します。完全なプリロードの例は
です。

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

原理は、ループ内で Image オブジェクトを作成し、オブジェクトの src を指定されたイメージに設定し、イメージのロードが完了したときに onload = function(){imageloadpost()} でイメージのロード完了を監視することです。 , imageloadpostが実行されます。 IE6 にはまだ問題があることが判明しました。プリロードされたイメージがすでにメモリ内にある場合、img.onload イベントは再度トリガーされません。ただしIE7以降は問題ありません。他のブラウザでは問題ないため、上記の img.onload リスニング イベントには互換性の問題はありません。

3.Ajax はプリロードを実装します

Ajax リクエストはあらゆるデータをリクエストでき、画像も例外ではありません。 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(''); 

画像の ajax プリロードは、実際には画像の純粋な js プリロードと同じです

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

ここでの説明は ajax の読み込みであるというだけですが、新しい画像はすべて ajax get リクエストであることがわかります。

上記がこの記事の全内容です。js イメージのプリロードを理解するのに役立つことを願っています。