Как реализовать предварительную загрузку изображений JavaScript?

Question

[Алексей]

Имеется клиент-серверное приложение на NodeJS и Socket.IO
При инициализации клиента он получает от сервера массив элементами которого являются ссылки на изображения.

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

Answer 1

[Сергей Воронков]

На vanila js :)

function preloadImages(images){
   images.forEach(function(src){
      var img = new Image();
      img.src = src;
   });
}
preloadImages(['img1.jpg','img2.jpg','img3.jpg','img4.jpg']);

Answer 2

[Testtest132]

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
$(['img1.jpg','img2.jpg','img3.jpg']).preload();