Jquery: предварительно загрузить изображение по запросу с помощью функции обратного вызова?

Question

Я помогаю другу с веб-сайтом, который он разрабатывает, и у нас возникают проблемы с предварительной загрузкой изображений по запросу. По сути, когда пользователь нажимает на миниатюру продукта, <div> скользит вниз, что включает в себя прокрутку больших изображений. Всего можно загрузить около 20 МБ изображений (если вы их все сделали), поэтому предварительная загрузка их при загрузке страницы не будет возможной.

Есть ли способ, которым мы могли бы вызвать функцию javascript, которая начинает предварительно загружать около 4 изображений, а затем, когда это сделано, она имеет функцию обратного вызова?

Спасибо! Постскриптум Мы используем jQuery на странице ...

Answer 1

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

$('<img/'>,{'src': image_source});

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

Возможно, следующий код может работать (не проверено):

var preloadImages = function(image_links, callback) {
  var self = this;
  // assume image_links is an array here
  var count = image_links.length;
  $.each( image_links, function(){
    $('<img/>', {
      'src': this, // url
      'load': function(){
        if( --count == 0 ) {
          callback.apply(self);
        }
      }
    });
  });      
}