Предзагрузка изображений в javascript

Изначально изображения отдавались веб сервером и предзагрузка работала правильно. Возникла необходимость отдавать изображения скриптом, из-за чего при предзагрузке на каждое изображение стало уходить по 2 запроса
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

preload: function(img, vol){
         //images[] массив изображений, img - номер изображения
        if(this.images[img] != []) {
            var no = img +1;
            var pic = new Image();
            var me = this;
            pic.onload = function(){
                 //я предполагаю что вся проблема из-за этого, когда мы добавляем изображение в DOM оно второй раз загружается
                $('#preload').append('<img id="i_' + no + '" src="' + pic.src +'">');
                me.preload(no, vol);
            };
          pic.src = this.baseUrl + '/images/getimage?mid=' + this.part_id + '&cid=' + vol + '&pid=' + this.images[img][0];
        }
    },
 

и вопрос, можно ли использовать предзагрузку одновременно с отдачей изображений скриптом, и если можно то как или в какую сторону копать? Спасибо.
0
javascript изображений предзагрузка

1 ответов

Если у вас предзагрузка изображений, которые еще не определены на странице, то попробуйте проще:


function preloadImages() {
  for(var i = 0; i<arguments.length; i++)
    $("<img />").attr("src", arguments[i]);
}

preloadImages("img/pic1.jpg","img/pic2.jpg");
 
1

Немного модифицировал свою функцию.
При предзагузке не надо создавать тэги img и складывать их в скрытый див, это оказалось бесполезно. Достаточно создавать


var image = new Image();
 
задавать ей src и складывать в массив к которому всегда можно обратиться.

var preloaded = [];
image.onload = function(){
    preloaded.push(pic);
}
 
Когда требуется изображение то уже тогда создаём тэг img

$('div.target').append('<img id="image">');
 
и задаём ему источник

$('#image').attr('src', preloaded[i]);
 
0