Добавление повторяющихся изображений на веб-странице с помощью JavaScript

Question

Я хочу использовать javascript для добавления некоторых изображений к div на веб-странице. Каждый новый экземпляр изображения будет в цикле, который включает в себя что-то вроде

pic=new Image()
pic.src="./images/xyz.jpg"
document.getElementById(div1).appendChild(pic)

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

В Интернете существуют различные методы клонирования объектов, поэтому вы можете подумать, что это что-то вроде

appendChild(pic1)
pic2=clone(pic1)
appendChild(pic2)

справился бы с задачей, но похоже, что клонирование включает .src, поэтому сбережений не будет. В любом случае появляется только одно изображение!

Есть идеи?

Answer 1

На самом деле, если изображение было загружено один раз, браузер не будет загружать другую копию.Таким образом, вы можете добавить столько же изображений, сколько хотите.

Answer 2

При перезагрузке двух страниц я не замечаю никакой разницы во времени рендеринга (с Google Chome).

Я предполагаю, что вы используете браузер с медленным движком JavaScript и / илиРеализация DOM.Также appendChild() может быть медленным.Создайте innerHTML как большую строку и назначьте ее за один раз.В качестве альтернативы используйте CSS для отображения изображений (используя background-image и фиксированный размер) и просто создайте пустые DIV.Это должно быть быстрее, чем создание сотен графических объектов.

Если вам это нужно еще быстрее, попробуйте CSS sprites .