2012-01-23 14 views
10

Mam kilka zdjęć wczytujących się z witryny i nie kontroluję ich dostępności. Zauważyłem, że przy dużym obciążeniu czasami nie ładują się, ale po szybkim odświeżeniu pokażą się od razu.Jak wykryć awarię ładowania obrazu, a jeśli się nie powiedzie, spróbować przeładować do momentu osiągnięcia sukcesu?

Czy istnieje sposób, aby wykryć, czy obrazy nie ładują się, a jeśli tak, wywołać ponowne załadowanie na img src, aż do załadowania? Jeśli tak, czy mógłbyś podać przykład?

Odpowiedz

7

Tutaj coś skompilowałem, co może pomóc. Nie udało mi się tego przetestować. Daj mi znać, jeśli masz jakieś problemy.

$(function() { 
    var $images = $('img.imageClassUpdateAtInterval:not([src="/assets/spinner.gif"])'); 

    // Now, no such image with 
    // a spinner 
    if($images.length === 0 && window.imageLocator) 
    clearInterval(window.imageLocator); 


    window.imageLocator = setInterval(function() { 
     $images.each(function() { 
      $this = $(this); 
      if (!$this.data('src')) { 
       $this.data('src', $this.prop('src')); 
      } 

      $this.prop('src', $this.data('src') + '?timestamp=' + new Date().getTime()); 
      console.log($this.prop('src')); 
     }); 
    }, 60 * 1000); 

    // suppose, an error occured during 
    // locating the src (source) of the 
    // image - image not found, network 
    // unable to locate the resource etc. 
    // it will fall in each time on error 
    // occurred 
    $('img.imageClassUpdateAtInterval').error(
      function() { 
       // set a broken image 
       $(this).unbind("error").attr("src", "/assets/broken.gif"); 
       // setting this up in relative 
       // position 
       $(this).css("position", "relative"); 
       $(this).apppend("<span>Error occured</span>"); 
       $(this).find("span").css({"position": "absolute", "background-color": "#252525", "padding": ".3em", "bottom": "0"}); 
    }); 

}); 

Powyższe rozwiązanie jest skompilowany z dwóch różnych rozwiązań rozpoczętych przez @user113716 i @travis

+0

To jest doskonałe wejście. Dzięki! Podoba mi się dodatkowe informacje. Oto oryginalny js, którego używam do przeładowania niektórych obrazów w oparciu o klasę co 60 sekund. Byłbym bardzo wdzięczny za zintegrowanie tego kodu z następującym kodem, którego używam, aby te dwa przykłady były poprawnie zintegrowane (jestem całkiem nowy w js na jakimkolwiek znaczącym poziomie): http: // j. mp/wzi7FI – ylluminate

+0

Przepraszam, ylluminate. Uciekłem. Zmieniłem mój post i mam nadzieję, że to ci pomoże. –

+0

Wyszło naprawdę dobrze, dzięki! Przygotuj kilka poprawek, ale udało ci się to wystarczająco dobrze. Świetna praca. – ylluminate

16
<img onerror="dosomthing()" ...> 
+4

To '$ ('# myImg') bind ('błąd', function (e) {...}); 'w jQuery :) – jocull

+0

Najprostsze rozwiązanie do zastępowania obrazów, które nie wczytują się z domyślnym obrazem. – MastaBaba

5

spojrzeć na ten kod:

$('img.autoFix').error(function(){ 
    var src = this.src; 
    this.src = src.substr(0, src.indexOf('?')) + '?t=' + new Date().getTime() 
}); 
+1

Czy nie dostałby się w nieskończoną pętlę na wypadek, gdyby obraz nie istniał lub pojawił się jakiś inny trwały problem? – fejese

+1

będzie, ale jeśli chcesz, możesz użyć atrybutu danych, aby ograniczyć liczbę prób. – Kiyan

+2

... lub użyj funkcji setTimeout w funkcji błędu, aby nie przeładować jak szalona. – markj

1

To bardzo proste podejście, które obsługuje wszystkie obrazy na strona.


https://github.com/doomhz/jQuery-Image-Reloader

jQuery obrazu Reloader

Sił przeglądarka, aby ponowić próbę ładowania połamane obrazy. Przyzwoite rozwiązanie dla obrazów przechowywanych w chmurze (np. Amazon S3).

Dlaczego i kiedy go używać?

Ta wtyczka jest skuteczna podczas ładowania obrazów z chmury (np. Amazon S3), a CDN ma opóźnienie, dopóki obraz nie będzie dostępny. Zamiast tego przeglądarka wyświetli ikonę uszkodzonego obrazu i nie będzie ponawiać próby ponownego załadowania. jQuery Image Reloader zajmie się tym.

kod Plugin

Jedynym kod trzeba aktywować wtyczki to:.

$(".slow-images").imageReloader(); 
Powiązane problemy