Каков наилучший способ предварительно загрузить несколько изображений в JavaScript?

Question

Если у меня есть массив имен файлов изображений,

var preload = ["a.gif", "b.gif", "c.gif"];

и я хочу предварительно загрузить их в цикле, нужно ли каждый раз создавать объект изображения? Будут ли работать все перечисленные ниже методы? Один лучше?

A.

var image = new Image();
for (i = 0; i < preload.length; i++) {
    image.src = preload[i];
}

B.

var image;
for (i = 0; i < preload.length; i++) {
    image = new Image();
    image.src = preload[i];
}

С

var images = [];
for (i = 0; i < preload.length; i++) {
    images[i] = new Image();
    images[i].src = preload[i];
}

Спасибо!

Answer 1

EDIT

На самом деле, я просто протестировал его, и метод А не работает должным образом:

Проверьте это: http://www.rootspot.com/stackoverflow/preload.php

Если вы щелкнете по второму изображению, когда страница закончит загрузку, оно должно появиться мгновенно, потому что оно было предварительно загружено, а первое - нет, потому что у него не было времени для загрузки до изменения источника. Интересно. С этой новой разработкой я бы просто использовал метод C.

Answer 2

Следующий код работает для меня. Он основан на [A]

JQuery:

var gallery= ['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];

var preload_image_object=new Image();

// Решение:

$.each(gallery,function(i,c){preload_image_object.src=c.logo})

OR

$.each(['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'],function(i,c){preload_image_object.src=c})

Answer 3

Я всегда использовал следующий код, который я также видел на многих других сайтах, поэтому я хотел бы предположить, что этот метод наиболее эффективен и похож на ваш метод c

function MM_preloadImages() { //v3.0
    var d=document; 
    if(d.images){ 
        if(!d.MM_p) d.MM_p=new Array();
         var i,j=d.MM_p.length,a=MM_preloadImages.arguments; 
         for(i=0; i<a.length; i++)
             if (a[i].indexOf("#")!=0) { 
                 d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
             }
    }
}

Я бы порекомендовал профилировать их все что-то вроде firebug

Answer 4

Если я правильно помню, у меня были проблемы с решением A, которое не загружалось предварительно в браузере. Хотя я не уверен на 100%.

Так как вы все их закодировали, почему бы не протестировать их, вы даже можете профилировать их, чтобы увидеть, какой из них самый быстрый.