У меня есть изображение, загруженное JS на событие мыши. Это довольно большое изображение, поэтому я хочу убедиться, что он загружен заранее. Я несколько раз использовал некоторые старые методы и нашел этот пример:
<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images)
{
img1 = new Image();
img2 = new Image();
img1.src = "imageName1.gif";
img2.src = "imageName2.gif"
}
</SCRIPT>
Я задавался вопросом, хорошо ли это/актуально, или, может быть, браузеры автоматически обнаруживают неиспользуемые изображения и предварительно загружают их? Обратите внимание, что моя страница должна поддерживать IE6, поэтому мне все равно понадобятся старые методы, но мне все еще интересно, есть ли у более современных браузеров лучший способ?
Нет, это он. Зачем менять что-то, что работает?
Но более правильное использование похоже на это
(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".
Зависит от того, какие изображения, о которых вы говорите, значки/кнопки и т.д., можно выполнить с помощью метода CSS Sprites.
Это интересно. Я задавал себе тот же самый вопрос в последнее время. Другим методом было бы создать элемент 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()). Он работает, и он должен был работать таким образом. Я не думаю, что это особенно вредно.
[Изменить] Второй блок кода должен быть выполнен, когда вы уверены, что изображения загружены и/или когда пользователь делает то, что вы ожидаете от него или нее, что вызывает его появление.