Предварительная загрузка изображений с помощью 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, которые делают это, но все они кажутся немного большими (по размеру); мне просто нужен быстрый, простой и короткий способ предварительной загрузки изображений!

664
javascript jquery

20 ответов

быстрая и просто:

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();
949

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

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

Использовать 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');
});
50

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.

34

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

$('<img src="img/1.jpg"/>');
24
$.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/

21

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

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

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

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

вы можете загружать изображения в свой 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 лучше также для производительности, потому что изображение действительно предварительно загружено, не будучи видимым вообще, пока вы не покажете это!

13

это 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
    }
});

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

13

быстрый, плагин бесплатный способ предварительной загрузки изображений в 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();
        }
    });
}
9

Спасибо за это! Я бы хотел добавить немного риффа в ответ 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, а затем предварительно загружает все большое изображение.

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

7
    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*/
        }
    )
3

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

$("#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";
3

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

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

1

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

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

Я хотел сделать это с помощью пользовательского наложения 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.

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

.attr('src',value)

не

.attr('src',this)

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

-1

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
-1

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

-3

все хипстеры написали там свою версию, так что вот моя. Он добавляет скрытый 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);
-7