Предварительная загрузка изображений в Javascript

var image = new Image();
image.src = "http://foo.com/myimage.jpg";

//if you have a div on the page that's waiting for this image...
var div = getElementById("imageWrapperDiv");

//you can set it on the image object as the item to draw into...
image.myDiv = div;

image.onload = function(){
  //do whatever you're going to do to display the image

  //so in this example, because I have set this objects myDiv property to a div on the page
 // I can then just populate that div with an img tag.
 //it's not the most elegant solution, but you get the idea and can improve upon it easily
  this.myDiv.innerHTML = "<img src='" +  this.src  +"'>";
}

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

Мне нравится этот метод CSS по сравнению с типичной функцией Javascript:

Поместите это в свой файл CSS:

div#preload { display: none; }

Поместите это внизу вашего HTML-документа:

<div id="preload">
   <img src="http://domain.tld/image-01.png" width="1" height="1" alt="Image 01" />
   <img src="http://domain.tld/image-02.png" width="1" height="1" alt="Image 02" />
   <img src="http://domain.tld/image-03.png" width="1" height="1" alt="Image 03" />
</div>

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

http://perishablepress.com/pure-css-better-image-preloading-without-javascript/

Для предварительной загрузки изображения используйте тег <link> и добавьте preload к атрибуту rel:

<link rel=preload href=path/to/the/image.jpg as=image>

В качестве альтернативы в Javascript:

var preImg = document.createElement('link')
preImg.href = 'path/to/image.jpg'
preImg.rel = 'preload'
preImg.as = 'image'
document.head.appendChild(preImg)

Значение preload атрибута rel элемента позволяет вам писать декларативные запросы выборки в вашем HTML, указывая ресурсы, которые потребуются вашим страницам очень скоро после загрузки, поэтому вы хотите начать предварительную загрузку на ранних этапах жизненного цикла загрузки страницы, до того, как браузер Включается основной механизм рендеринга. Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведет к повышению производительности.

Документация: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content