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

Question

Я пытаюсь предварительно загрузить изображения с помощью 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вести себя так же?

Answer 1

Я бы предложил использовать 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.

Answer 2

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

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

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

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

Answer 3

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

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

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

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

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