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

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

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

Использовать JavaScript изображения объекта.

эта функция позволяет вызвать обратный вызов при загрузке всех изображений. Однако обратите внимание, что он никогда не вызовет обратный вызов, если хотя бы один ресурс не загружен. Это может быть легко исправлено путем реализации 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 где-то с помощью css display:none; правило, а затем показать их, когда вы хотите с js или jquery

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

пример: 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,39 КБ

использование:

$({}).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();
        }
    });
}

Спасибо за это! Я бы хотел добавить немного риффа на ответ J-P - я не знаю, поможет ли это кому-нибудь, но таким образом вам не нужно создавать массив изображений, и вы можете предварительно загрузить все свои большие изображения, если правильно назовете свои большие пальцы. Это удобно, потому что у меня есть кто - то, кто пишет все страницы в 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";

Я бы использовал файл манифеста, чтобы сообщить (современным) веб-браузерам также загружать все соответствующие изображения и кэшировать их. Используйте 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 предупреждает, что кэшируется изображения не очень хорошо работают с этим кодом eventing/handler, но он работает для меня в 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 back to html5 player:) И создать свой собственный. У меня нет подробностей, потому что я еще не начал, если я не забыл, я опубликую его позже и попробую какой-то стандартный код Jquery для моего.

все хипстеры написали там свою версию, так что вот моя. Он добавляет скрытый div к телу и заполняет его необходимыми изображениями. Я написал это в кофейном сценарии. Вот кофе, обычный js и сжатый js.

кофе:

$.fn.preload = () ->
    domHolder = $( '<div/>' ).hide()
    $( 'body' ).append domHolder
    this.each ( i, e) =>
        domHolder.append( $('<img/>').attr('src', e) )

нормальный:

(function() {

  $.fn.preload = function() {
    var domHolder,
      _this = this;
    domHolder = $('<div></div>').css('display', 'none');
    $('body').append(domHolder);
    return this.each(function(i, e) {
      return domHolder.append($('<img/>').attr('src', e));
    });
  };

}).call(this);

сжатый:

function(){$.fn.preload=function(){var a,b=this;return a=$("<div></div>").css("display","none"),$("body").append(a),this.each(function(b,c){return a.append($("<img/>").attr("src",c))})}}.call(this);