Что я могу сделать, чтобы Mozilla Firefox предварительно загрузил возможный результат изображения?

Я пытаюсь предварительно загрузить изображения с помощью JavaScript. Я объявил массив следующим образом со ссылками на изображения из разных мест:

var imageArray = new Array();
imageArray[0] = new Image();
imageArray[1] = new Image();
imageArray[2] = new Image();
imageArray[3] = new Image();
imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg";
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg";
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg";
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg";

Эффекты затухания и преобразования изображения, которые я выполняю с помощью этого массива, работают должным образом для первых 3 изображений, но для последнего, imageArray[3], фактические данные изображения изображения не загружаются предварительно, и это полностью разрушает эффект, поскольку фактический данные изображения загружаются ПОСЛЕ, кажется, только в то время, когда их нужно отобразить.

Это происходит потому, что последняя ссылка http://www.iill.net/wp-content/uploads/images/hot-chick.jpg не является прямой ссылкой на изображение. Если вы перейдете по этой ссылке, ваш браузер перенаправит вас в ФАКТИЧЕСКОЕ местоположение. Теперь мой код предварительной загрузки изображений в Chrome работает отлично, и эффекты выглядят великолепно. Потому что кажется, что Chrome предварительно загружает фактические данные - ВОЗМОЖНОЕ изображение, которое должно быть показано. Это означает, что в Chrome, если я предварительно загрузил изображение, которое будет перенаправлять на «прекратить воровать мою пропускную способность», то изображение, которое будет предварительно загружено, будет «прекратить воровать мою пропускную способность».

Как я могу изменить свой код, чтобы Firefox вел себя так же?


javascript html hotlinking preloading image-preloader
person Dalal    schedule 26.02.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я бы предложил использовать ul с дочерними элементами li, которые содержат соответствующие изображения. Стилизуйте ul с display: none (или, альтернативно, position: absolute вне страницы), и изображения все равно должны загружаться браузером, независимо от того, что они, по сути, невидимы для пользователя.

Немного запутанный способ сделать это с вашим текущим кодом проиллюстрирован на JS Fiddle, соответствующий JS ниже:

var imageArray = new Array();
imageArray[0] = new Image();
imageArray[1] = new Image();
imageArray[2] = new Image();
imageArray[3] = new Image();

imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg";
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg";
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg";
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg";

// the below stuff is the new:

var newList = document.createElement('ul');
newList.setAttribute('id', 'imgPreload');

var preload = document.getElementById('preload');
preload.appendChild(newList);
var imgPreload = document.getElementById('imgPreload');

var li = document.createElement('li');

for(i=0; i<imageArray.length; i++){
    imgPreload.appendChild(li).appendChild(imageArray[i]);
}

Очевидно, что приведенное выше не скрывает созданный ul, но демонстрация показывает один из способов его динамического создания. По общему признанию, я также пока тестировал его только в Chrome.

person David says reinstate Monica    schedule 26.02.2011

arrow_upward
0
arrow_downward

Почему бы вам не разместить изображение на странице без источника и не скрыть его:

<img src='' id='preLoadImage1' style='display: none' />

Теперь в вашем Javascript загрузите изображение:

document.getElementById('preLoadImage1').src = '';

Затем вы можете поместить этот img внутри div позже.

person Martin    schedule 26.02.2011

arrow_upward
0
arrow_downward

Я думаю, что вы находитесь на неправильной стороне этого вопроса ~ Какой бы метод вы ни использовали, в конечном итоге он может быть опровергнут хозяином изображения. Почему бы не сохранить копию на хосте, которым вы управляете?

Тем не менее, вы можете попробовать

<img src="hotlink" style="visibility:hidden;position:absolute;margin-top:-1000px;" />

Это может заставить FireFox кэшировать изображение.

person Shad    schedule 26.02.2011