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

У меня есть изображение, загруженное JS на событие мыши. Это довольно большое изображение, поэтому я хочу убедиться, что он загружен заранее. Я несколько раз использовал некоторые старые методы и нашел этот пример:

<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images) 
{
   img1 = new Image();
   img2 = new Image();
   img1.src = "imageName1.gif";
   img2.src = "imageName2.gif"
}
</SCRIPT>

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

Ответ 1

Нет, это он. Зачем менять что-то, что работает?

Но более правильное использование похоже на это

(function() {
   var img1 = new Image();
   var img2 = new Image();
   img1.src = "imageName1.gif";
   img2.src = "imageName2.gif"
})();

или просто

new Image().src = "imageName1.gif";
new Image().src = "imageName2.gif"

Оба этих метода избегают загромождения глобальной области с помощью переменных.

И language="JavaScript" устарел. Используйте type="text/javascript".

Ответ 2

Зависит от того, какие изображения, о которых вы говорите, значки/кнопки и т.д., можно выполнить с помощью метода CSS Sprites.

http://www.alistapart.com/articles/sprites

Ответ 3

Это интересно. Я задавал себе тот же самый вопрос в последнее время. Другим методом было бы создать элемент DOM для каждого элемента и дождаться, пока вам не нужно его отобразить, прежде чем вводить его в тело документа. Например,

var img1 = document.createElement('img');
var img2 = document.createElement('img');
img1.setAttribute('src','imageName1.gif');
img2.setAttribute('src','imageName2.gif');

... а потом, когда вы знаете, что изображения готовы к вставке...

document.getElementById('imagePlaceholder1').appendChild(img1);
document.getElementById('imagePlaceholder2').appendChild(img2);

Это приводит к тому, что файл "предварительно загружен" в современных браузерах, которые я тестировал, и он может быть более совместим с вашими собственными стилями кодирования, но я все еще беспокоюсь о том, что некоторые браузеры могут не загружать изображение на время создания элемента, но подождите, пока оно не добавится в тело документа. Поэтому я решил использовать точное решение, о котором вы говорили. По крайней мере до следующего обновления ECMAScript нет ничего плохого в "старом коде" (по крайней мере, старый код, например, новый Image()). Он работает, и он должен был работать таким образом. Я не думаю, что это особенно вредно.

[Изменить] Второй блок кода должен быть выполнен, когда вы уверены, что изображения загружены и/или когда пользователь делает то, что вы ожидаете от него или нее, что вызывает его появление.