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

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

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

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

а.

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

В.

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

Спасибо!

Ответы

Ответ 1

ИЗМЕНИТЬ

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

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

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

Ответ 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})

ИЛИ

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

Ответ 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

Ответ 4

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

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