Загрузите все изображения из папки на веб-сайте перед ее открытием [дублировать]

этот плагин 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
    }
});

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

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

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

Я хотел сделать это с помощью пользовательского наложения 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 предупреждает, что кешированные изображения не очень хорошо работают с этим кодом eventing / handler, но он работает для меня в FireFox и Chrome, и мне не нужно беспокоиться об IE.

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

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

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.

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

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

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

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

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