javascript - страницы - предзагрузка изображений jquery




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

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


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

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 и получение функции обратного вызова - это создание сразу нескольких тегов 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();
        }
    });
}

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

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

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


Используйте объект 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');
});

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

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

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

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

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

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

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

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


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

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

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

не использовать js или jquery-функции для предварительной загрузки - это просто правило css Vs для многих строк 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,39kb

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

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

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


$.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/


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

.attr('src',value) not .attr('src',this)

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





jquery