Предварительная загрузка изображений с помощью js

Question

Я использовал этот учебник, чтобы сделать слайдер изображений на моем сайте.Но у меня есть более 100 изображений.При загрузке страницы будет сложно загрузить все.Итак, любые приемы для предварительной загрузки первых ~ 10 изображений, а когда я, например, переместимся на 9-е, загрузите еще 10?

Или есть уже подготовленный плагин для jquery, который обеспечивает это?

Answer 1

с jquery, что-то простое, как это работает:

$('<img />')[0].src = 'image.jpg';

создает элемент, но никогда не добавляет его на страницу поэтому изображение загружено, но никогда не показывается проверьте панель Net в firebug, чтобы увидеть, что она загружена.

Answer 2

С jQuery я использую это:

(function($) {
  var cache = [];

  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

jQuery.preLoadImages("/images/img01.jpg","/images/img02.jpg");