Wstępne ładowanie obrazów za pomocą jQuery

Oto poprawiona wersja pierwszej odpowiedzi, która ładuje obrazy do DOM i domyślnie je ukrywa.

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

Użyj JavaScript obiekt obrazu .

Ta funkcja pozwala na wywołanie połączenia zwrotnego po załadowaniu wszystkich zdjęć. Należy jednak pamiętać, że nigdy nie spowoduje wywołania zwrotnego, jeśli co najmniej jeden zasób nie zostanie załadowany. Można to łatwo naprawić poprzez implementację wywołania zwrotnego onerror i zwiększenie wartości loaded lub obsługę błędu.

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, po sprawdzeniu rozwiązania, nadal miałem problemy w Firefoksie, gdzie nie ładował wstępnie obrazów przed przejściem wraz z ładowaniem strony. Odkryłem to umieszczając sleep(5) w skrypcie po stronie serwera. Wdrożyłem następujące rozwiązanie oparte na Twoim, które wydaje się rozwiązać ten problem.

Zasadniczo dodałem callback do jQuery preload plugin, tak, że zostanie wywołany po wszystkie obrazy są prawidłowo załadowane.

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

Z zainteresowania, w moim kontekście, jestem używając tego w następujący sposób:

$.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

Mam nadzieję, że pomoże to komuś, kto przychodzi na tę stronę z Google (tak jak ja), szukając rozwiązania do wstępnego ładowania obrazów w połączeniach Ajax.

Ten jednowierszowy kod jQuery tworzy (i ładuje) element DOM img bez pokazywania go:

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

Użycie jest dość proste:

$('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

Http://jsfiddle.net/yckart/ACbTK/

Mam małą wtyczkę, która obsługuje to.

Nazywa się waitForImages i może obsługiwać img elementy lub dowolny element z odniesieniem do obrazu w CSS, np. div { background: url(img.png) }.

Jeśli po prostu chcesz załadować wszystkie obrazy, w tym te wymienione w CSS, oto jak byś to zrobił:)

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

Możesz załadować gdzieś obrazy w html za pomocą reguły css display:none;, a następnie pokazać je, gdy chcesz za pomocą js lub jquery

Nie używaj funkcji js lub jquery do wstępnego załadowania to tylko reguła css Vs wiele linii js do wykonania

Przykład: 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();

Wstępne ładowanie obrazów przez jQuery / javascript nie jest dobre, ponieważ ładowanie obrazów zajmuje kilka milisekund na stronie + masz milisekundy na przetworzenie i wykonanie skryptu, szczególnie, jeśli są to duże obrazy, więc ukrywanie ich w hml jest lepsze również dla wydajności, ponieważ obraz jest naprawdę wstępnie załadowany bez bycia widocznym w ogóle, dopóki tego nie pokażesz!

This jQuery imageLoader plugin is just 1.39 kb

Użycie:

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

Istnieją również inne opcje, takie jak to, czy chcesz załadować obrazy synchronicznie lub asymetrycznie i kompletne Zdarzenie dla każdego pojedynczego obrazu.

Szybki, wolny od pluginów sposób na wstępne załadowanie obrazów w jQuery i uzyskanie funkcji zwrotnej polega na utworzeniu wielu img tagów naraz i zliczeniu odpowiedzi, np.

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. */
});
​    ​

Zauważ, że jeśli chcesz obsługiwać IE7, musisz użyć tej nieco mniej ładnej wersji (która działa również w innych przeglądarkach):

function preload(files, cb) {
    var len = files.length;
    $($.map(files, function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

Dzięki za to! Chciałbym dodać trochę riffu na odpowiedź J-P - Nie wiem, czy to komuś pomoże, ale w ten sposób nie musisz tworzyć tablicy obrazów, a możesz wstępnie załadować wszystkie duże obrazy, jeśli poprawnie nazwiesz kciuki. Jest to przydatne, ponieważ mam kogoś, kto pisze wszystkie strony w html, i zapewnia to jeden krok mniej do zrobienia - eliminując potrzebę tworzenia tablicy obrazów i kolejny krok, w którym rzeczy mogą się spieprzyć w górę.

$("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

Zasadniczo dla każdego obrazu na stronie chwyta src każdego obrazu, jeśli spełnia określone kryteria (jest kciukiem lub obrazem strony głównej) zmienia nazwę( podstawowy ciąg zastępuje w obrazie src), a następnie ładuje obrazy.

W moim przypadku strona była pełna obrazków o nazwie image_th.jpg, a wszystkie odpowiednie duże obrazy noszą nazwę image_lg..jpg Kciuk na duży zastępuje tylko _th.jpg z _lg.jpg, a następnie ładuje wszystkie duże obrazy.

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

Używam następującego kodu:

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

Użyłbym pliku manifestu, aby powiedzieć (nowoczesnym) przeglądarkom internetowym, aby również załadowały wszystkie odpowiednie obrazy i buforowały je. Użyj Grunt i grunt-manifest, aby zrobić to automatycznie i nigdy więcej nie martwić się o Skrypty wstępne, unieważniacze pamięci podręcznej, CDN itp.

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

Działa mi to nawet w IE9:

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

Chciałem to zrobić za pomocą niestandardowej nakładki Google Maps API. Ich przykładowy kod po prostu używa JS do wstawiania elementów IMG, a pole zastępcze obrazu jest wyświetlane do momentu załadowania obrazu. Znalazłem tu odpowiedź, która mi pomogła: https://stackoverflow.com/a/10863680/2095698 .

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

To wstępnie ładuje obraz, jak sugerowano wcześniej, a następnie używa funkcji obsługi do dodania obiektu img po załadowaniu adresu URL img. dokumentacja jQuery ostrzega, że buforowane obrazy nie działają dobrze z tym kodem eventing/handler, ale u mnie działa w Firefoksie i Chrome i nie muszę się martwić o IE.

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

.attr('src',value)

NIE

.attr('src',this)

Tak tylko zaznaczyć:)

5 wierszy w 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

Dla tych, którzy znają trochę actionscript, można sprawdzić flash player, przy minimalnym wysiłku, i zrobić preloader flash, że można również eksportować do html5 / Javascript / Jquery. Aby użyć, Jeśli flash player nie zostanie wykryty, sprawdź przykłady, jak to zrobić z rolą youtube powrót do odtwarzacza html5:) I stwórz swój własny. Nie mam szczegółów, bo jeszcze nie zacząłem, jeśli nie zapomniałem, i wil post później i wypróbuje niektóre standerd kod Jquery do kopalni.

Wszyscy hipsterzy napisali tam własną wersję, więc oto moja. Dołącza Ukryty div do ciała i wypełnia go wymaganymi obrazami. Napisałem to scenariuszem do kawy. Tu jest kawa, normalne js i skompresowane js.

Kawa:

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

Normalny:

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

Skompresowany:

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