Jak sprawdzić, czy obraz jest załadowany lub buforowany w JQuery?

Question

Wydaje się, że funkcja .load() nie uruchamia się, jeśli obraz został wcześniej buforowany. Więc jeśli chcesz się upewnić, jeden załadowaniu zdjęcia przed załadowaniem i pokazać inną (tj Magnifier) ​​nie można zrobić coś takiego:

$(img_to_load_first) 
    .load(
     $(img_to_load_last) 
      .src("2nd.png"); 
    ) 
    .src("1st.png"); 

Więc jak zapewnić porządek ładowania w JQuery?

Answer 1

To, co musisz zrobić, to selektywnie obsługiwać wiązania ładunków. Możesz zweryfikować obciążenie, testując właściwość obiektu obrazu complete.

Na przykład

$('.load_selector').each(function(){ 

    if (!this.complete) { 
     $(this).load(function(){ 
      // handle image load event binding here 
     }); 
    } else { 
     // handle image already loaded case 
    } 

}); 

Należy zauważyć, że powyżej this (stosowany sam) odnosi się do odniesienia do obiektu DOM obrazu dostarczonego przez jQuery.

Answer 2

Dzięki Sparkey,

Dam to spróbować, ale wygląda dobrze. Znalazłem szeroką dyskusję na ten temat tutaj: http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm

który doprowadzi mnie do „plugin jQuery«onImagesLoad»” tu: http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1/documentation/

co wydaje się rozwiązać ten problem tak:

$imgs.each(function(i, val){ 
    $(this).bind('load', function(){ 
     // ... 
    }).each(function(){ 
     if (this.complete || this.complete === undefined){ this.src = this.src; } //needed for potential cached images 
    }); 
}); 

Co w zasadzie sprowadza się do tego, co powiedziałeś, tylko jego ukończone sprawdzenie sprawdza również "niezdefiniowane".

Answer 3

Jeśli chcesz owinąć całą tę funkcjonalność w metodzie wydłużania jQuery, spróbuj tego (który powinien pracować czekając na dowolną liczbę obrazów):

$.fn.imagesLoaded = function() { 
    var def = $.Deferred(); 
    var count = this.length; 
    this.each(function() { 
     if (this.complete) { 
      if (!--count) { 
       def.resolve(); 
      } 
     } else { 
      $(this).load(function() { 
       if (!--count) { 
        def.resolve(); 
       } 
      }); 
     } 
    }); 
    return def.promise(); 
} 

a następnie po prostu używać tak:

$(img_to_load_first).imagesLoaded().done(function() { 
    $(img_to_load_last).src("2nd.png"); 
}); 

Answer 4

Można również sprawdzić, czy obraz ma szerokość lub wysokość, aby wykryć, czy jest już załadowany.

Na przykład:

var img = _content.find('img'); 
    if(img[0].width >0 || img[0].height > 0) { 
    console.log('already loaded image'); 
    } else { 
    img.on('load', function() { 
    console.log('image loaded'); 
    }); 
}