どのようにサーバーからjavascript配列に多くのイメージを添付しますか？

Question

私は500以上のアイコンを持つウェブサイトを持っています。私は、img.src = "/images/icon1.png"を使って自分たちでロードするだけでは時間がかかりすぎるということを発見しました。私のサイトの他の要素はページの下にあるので、すべてのためロードに30秒かかるアイコンが最初にロードされます。このような大量のアイコンで作業する最善の方法は何ですか？どのようにプリロードし、好ましくは1つの大きなスプライトにしないのですか？

var img = new Image(); 
img.src = "/images/icon1.png"; 

より良い方法は、配列を使用することです：彼らは

Answer 1

あなたが使用してJavaScriptでこれらの画像をプリロードすることができ、クライアント側で再利用できるように理想的には私は、サーバー側ではJavaScript変数にそれらを初期化したいですそのよう：

var preloader = ["a.png", "b.jpg", "c.gif"]; 

var img = []; 

for (i = 0; i < preloader.length; i++) { 
    img[i] = new Image(); 
    img[i].src = preloader[i]; 
} 

これらの記事をチェックアウト：

The definitive best way to preload images using JavaScript/jQuery?

JavaScript Preloading Images

What is the best way to preload multiple images in JavaScript?