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

Я ищу быстрый и простой способ предварительной загрузки изображений с помощью JavaScript. Я использую jQuery, если это важно.

Я видел это здесь ( http: //nettuts.com ... ):

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

Но это выглядит немного чрезмерно для того, что я хочу!

Я знаю, что есть плагины jQuery, которые делают это, но все они кажутся немного большими (по размеру); Мне просто нужен быстрый, простой и короткий способ предварительной загрузки изображений!

Быстро и просто:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Или, если вы хотите плагин jQuery:

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

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Вот измененная версия первого ответа, которая фактически загружает изображения в DOM и скрывает его по умолчанию.

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

Использовать объект JavaScript Image .

Эта функция позволяет вызвать обратный вызов при загрузке всех изображений. Однако обратите внимание, что он никогда не будет вызывать обратный вызов, если хотя бы один ресурс не загружен. Это может быть легко исправлено путем реализации onerrorобратного вызова и увеличения loadedзначения или обработки ошибки.

var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

JP, После проверки вашего решения, у меня все еще были проблемы в Firefox, когда он не загружал изображения до перехода к загрузке страницы. Я обнаружил это, поместив некоторые sleep(5)в свой серверный скрипт. Я реализовал следующее решение на основе вашего, которое, кажется, решает эту проблему.

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

// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').attr({ src: this }).load(function() {
      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

Из интереса, в моем контексте, я использую это следующим образом:

$.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

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

Этот однострочный код jQuery создает (и загружает) элемент DOM img, не показывая его:

$('<img src="img/1.jpg"/>');

$.fn.preload = function (callback) {
  var length = this.length;
  var iterator = 0;

  return this.each(function () {
    var self = this;
    var tmp = new Image();

    if (callback) tmp.onload = function () {
      callback.call(self, 100 * ++iterator / length, iterator === length);
    };

    tmp.src = this.src;
  });
};

Использование довольно просто:

$('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

http://jsfiddle.net/yckart/ACbTK/

У меня есть небольшой плагин, который обрабатывает это.

Он называется waitForImages и может обрабатывать imgэлементы или любые элементы со ссылкой на изображение в CSS, например div { background: url(img.png) }.

Если вы просто хотите загрузить все изображения, включая те, на которые есть ссылки в CSS, вот как вы это сделаете :)

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

Вы можете загрузить изображения в ваш HTML где-нибудь с помощью display:none;правила CSS , а затем показать их, когда вы хотите с JS или JQuery

не используйте функции js или jquery для предварительной загрузки - это просто правило css против множества строк j, которые нужно выполнить

пример: HTML

<img src="someimg.png" class="hide" alt=""/>

Css:

.hide{
display:none;
}

JQuery:

//if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

Предварительная загрузка изображений с помощью jquery / javascript не годится, поскольку загрузка изображений на странице занимает несколько миллисекунд + у вас есть миллисекунды для синтаксического анализа и выполнения сценария, особенно если это большие изображения, поэтому скрытие их в hml лучше также для производительности, потому что изображение действительно предварительно загружено, не будучи видимым, пока вы не покажете это!

этот jquery imageLoader плагин всего 1.39kb

Применение:

$({}).imageLoader({
    images: [src1,src2,src3...],
    allcomplete:function(e,ui){
        //images are ready here
        //your code - site.fadeIn() or something like that
    }
});

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

Быстрый, без плагинов способ предварительно загрузить изображения в jQuery и получить функцию обратного вызова состоит в том, чтобы создавать несколько imgтегов одновременно и подсчитывать ответы, например

function preload(files, cb) {
    var len = files.length;
    $(files.map(function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

preload(["one.jpg", "two.png", "three.png"], function() {
    /* Code here is called once all files are loaded. */
});
​    ​

Обратите внимание, что если вы хотите поддерживать IE7, вам нужно использовать эту немного менее симпатичную версию (которая также работает в других браузерах):

function preload(files, cb) {
    var len = files.length;
    $($.map(files, function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

Спасибо за это! Я хотел бы добавить небольшой риф к ответу JP - я не знаю, поможет ли это кому-нибудь, но таким образом вам не нужно создавать массив изображений, и вы можете предварительно загрузить все свои большие изображения, если вы правильно назовите большие пальцы. Это удобно, потому что у меня есть кто-то, кто пишет все страницы в html, и это гарантирует им на один шаг меньше - устранение необходимости создавать массив изображений и еще один шаг, когда все может быть испорчено.

$("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

По сути, для каждого изображения на странице он получает src каждого изображения, если он соответствует определенным критериям (большой палец или изображение домашней страницы), он меняет имя (базовая строка заменяет в src изображения), затем загружает изображения ,

В моем случае страница была полна изображений большого пальца, все названы как image_th.jpg, а все соответствующие большие изображения названы image_lg.jpg. Большой палец просто заменяет _th.jpg на _lg.jpg, а затем предварительно загружает все большие изображения.

Надеюсь, это кому-нибудь поможет.

    jQuery.preloadImage=function(src,onSuccess,onError)
    {
        var img = new Image()
        img.src=src;
        var error=false;
        img.onerror=function(){
            error=true;
            if(onError)onError.call(img);
        }
        if(error==false)    
        setTimeout(function(){
            if(img.height>0&&img.width>0){ 
                if(onSuccess)onSuccess.call(img);
                return img;
            }   else {
                setTimeout(arguments.callee,5);
            }   
        },0);
        return img; 
    }

    jQuery.preloadImages=function(arrayOfImages){
        jQuery.each(arrayOfImages,function(){
            jQuery.preloadImage(this);
        })
    }
 // example   
    jQuery.preloadImage(
        'img/someimage.jpg',
        function(){
            /*complete
            this.width!=0 == true
            */
        },
        function(){
            /*error*/
        }
    )

Я использую следующий код:

$("#myImage").attr("src","img/spinner.gif");

var img = new Image();
$(img).load(function() {
    $("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";

Я бы использовал файл Manifest, чтобы сообщить (современным) веб-браузерам, чтобы они также загружали все соответствующие изображения и кэшировали их. Используйте Grunt и grunt-manifest, чтобы сделать это автоматически, и больше никогда не беспокоиться о скриптах предварительной загрузки, обесценивателях кэша, CDN и т. Д.

https://github.com/gunta/grunt-manifest

Это работает для меня даже в IE9:

$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });

Я хотел сделать это с помощью пользовательского оверлея Google Maps API. Их пример кода просто использует JS для вставки элементов IMG, и поле заполнителя изображения отображается до тех пор, пока изображение не будет загружено. Я нашел ответ, который работал для меня: https://stackoverflow.com/a/10863680/2095698 .

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

Это предварительно загружает изображение, как предлагалось ранее, а затем использует обработчик для добавления объекта img после загрузки URL-адреса img. Документация jQuery предупреждает, что кэшированные изображения плохо работают с этим кодом события / обработчика, но он работает для меня в FireFox и Chrome, и мне не нужно беспокоиться об IE.

function preload(imgs) {
    $(imgs).each(function(index, value) {
        $('<img />').attr('src', value).appendTo('body').css('display', 'none');
    });
}

.attr('src',value) не .attr('src',this)

просто чтобы указать на это :)

5 строк в coffeescript

array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png']

$(document).ready ->
  for index, image of array
    img[index] = new Image()
    img[index].src = image

Для тех, кто немного знает ActionScript, вы можете с минимальными усилиями проверить flash player и сделать предварительный загрузчик flash, который вы также можете экспортировать в html5 / Javascript / Jquery. Чтобы использовать, если flash player не обнаружен, посмотрите примеры того, как сделать это с ролью youtube обратно в html5 player :) И создайте свой собственный. У меня нет подробностей, потому что я еще не начал, если я не забыл, я опубликую его позже и попробую какой-то странный код Jquery для моего.