Я ищу быстрый и простой способ предварительной загрузки изображений с помощью 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 объект изображения Глядя на вывод

Эта функция позволяет вызвать обратный вызов при загрузке всех изображений. Однако обратите внимание, что он никогда не будет запускаться обратный вызов, если хотя бы один ресурс не загружен. Это можно легко исправить, реализовав пару 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.

начиная с версии 1.5

$('<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/

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

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

Если вы просто хотели загрузить самая первая спецификация ECMAscript в 1997 году Пока запрашиваемый сервер поддерживает формат данных JSON, используйте интерфейс JSONP (JSON Padding). Это позволяет вам делать внешние запросы домена без прокси-серверов или причудливых заголовков.

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

вы можете загружать изображения в ваш html где-нибудь, используя css display:none;, затем покажите их, когда хотите, с помощью объекта js или jquery

Как можно проще получить объекты IMO:

пример: HTML

<img src="someimg.png" class="hide" alt="javascript - Предварительная загрузка изображений с помощью jQuery"/>

Css:

.hide{
display:none;
}

Рабочий пример

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

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

этот jquery document.execCommand (‘copy’) плагин всего 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, вам нужно использовать эту немного менее симпатичную версию (которая также работает в других браузерах): { *} Если это действительно нужно, eval — это не зло. Но 99,9 % случаев использования eval, с которым я сталкиваюсь, — это

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), затем загружает изображения.

. Было бы достаточно легко повторно реализовать это в ES6:

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

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

Я хотел сделать это с помощью пользовательского наложения API Карт Google. Их пример кода просто использует 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) с логикой в ​​центральном файле JavaScript выглядит примерно так: .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. флеш-плеер не обнаружен, посмотрите примеры того, как сделать это с ролью youtube обратно в html5 player:) и создайте свою собственную. У меня нет деталей, потому что я еще не начал, если я не забыл, я буду опубликуйте его позже и опробую какой-нибудь странный код Jquery для моего.

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

Coffee:

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

Normal:

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