jQuery: Controllare se l’immagine esiste

Sto caricando un percorso dell’immagine tramite jQuery $.ajax e prima di mostrare l’immagine mi piacerebbe verificare se in effetti esiste. Posso usare l’immagine di carico/pronto evento o qualcosa di simile per determinare il percorso del file è valido?

Avere .myimage set di display: none, spero di fare qualcosa di simile

$(".myimage").attr("src", imagePath);
$(".myimage").load(function() {
    $(this).show();
});

È qualcosa di simile possibile?

InformationsquelleAutor Marko | 2010-07-25



6 Replies
  1. 34

    Bene, è possibile associare .errore() gestore…

    come questo,

    $(".myimage").error(function(){
      $(this).hide();
    });

    bene, a te va bene già con carico-evento

    $(".myimage").load(function() {
        $(this).show();
    });

    il problema con questo è che se Javascript è stato disabilitato l’immagine non verrà mai…

    • Oh davvero? Non pensavo di carico, il metodo potrebbe essere utilizzato, ho appena postato come esempio di quello che sto cercando di fare. Anche io non sono preoccupato per il Javascript disabilitato dal momento che sto usando $.ajax per cominciare…:) +1
    • si prega di spiegare perché il voto. In modo che questa risposta potrebbe essere migliorata se avete qualcosa…
    • Sembra funzionare solo in modo intermittente in Internet Explorer 9. (Non ho provato le altre versioni ie). Sto usando di più $(document).pronto funzioni, ma sembra funzionare senza intoppi in altri browser e non gli errori vengono lanciati. Si può vedere qui – se una copertina non esiste sul server, il che significa che esso è stato rimosso e poi mostrare il coperchio rimosso informazioni. fordummiescovers.com/share.php?id=100 funzionalità di JS: fordummiescovers.com/js/covercheck.js
  2. 21

    Provare:

    function urlExists(testUrl) {
     var http = jQuery.ajax({
        type:"HEAD",
        url: testUrl,
        async: false
      })
      return http.status;
          //this will return 200 on success, and 0 or negative value on error
    }

    quindi utilizzare

    if(urlExists('urlToImgOrAnything') == 200) {
        //success
    }
    else {
        //error
    }
    • Questo risultato è la seguente avvertenza: “Sincrono XMLHttpRequest sul thread principale è sconsigliata a causa dei suoi effetti negativi per l’utente finale.”
  3. 6

    Un vecchio thread, lo so, ma penso che potrebbe essere migliorata. Ho notato OP avere problemi intermittenti che potrebbe essere a causa del caricamento dell’immagine e il controllo degli errori contemporaneamente. Sarebbe meglio lasciare che il caricamento dell’immagine prima e quindi verificare la presenza di errori:

    $(".myimage").attr("src", imagePath).error(function() {
        //do something
    });
  4. 4

    Dal momento che si sta già facendo una richiesta AJAX, vorrei offload questo per il lato server app che supporta il tuo AJAX. È banale verificare se esiste un file dal server, e si potrebbe impostare le variabili i dati che si invia indietro per specificare risultati.

    • +1 pensare Bene.
    • -1 il .load() l’OP sta utilizzando non è un ajax…. api.jquery.com/load-event
    • Che è una buona risposta e una possibile alternativa, ma la mia domanda è se posso controllare con jQuery in particolare.. +1 per il metodo server però.
    • Ero così giudicare,.. +1… ma poi non voglio prendere il mio -1 per voi potrebbe fare un controllo sul lato client….
    • OP specificamente menzionato che stava usando AJAX per ottenere i suoi dati, in primo luogo, quando descrive il suo processo. Inoltre, qualsiasi metodo per controllare se il file esiste, è andando ad avere per inviare un’altra richiesta al server in ogni caso – si sta facendo sul lato server una volta, o stai facendo extra sul lato client lavoro solo di avere ancora le interazioni con il server come risultato di tutto ciò che fate.
    • Per chiarire quanto sopra, si sta mai solo il controllo per i file sul client-side. Ogni codice potrà inviare almeno una, e forse molte altre richieste al server. Quindi è di gran lunga migliore per inviare le informazioni posteriore originale interazione con il server.

  5. 2

    Questa domanda è un paio di anni, ma qui è un esempio migliore di utilizzo per il gestore di errore per chiunque sia alla ricerca di questo.

    $("img")
      .error(function(){
        $(this).hide();
      })
      .attr("src", "image.png");

    È necessario collegare il gestore di errore prima di provare a caricare l’immagine, in modo da intercettare l’evento.

    Fonte: http://api.jquery.com/error/

  6. 0

    Questo è quello che ho fatto mio:

    $.get( 'url/image', function(res){ 
        //Sometimes has a redirect to not found url
        //Or just detect first the content result and get the a keyword for 'indexof'
        if ( res.indexOf( 'DOCTYPE' ) !== -1 )  {
            //not exists
        } else {
            //exists
        }
    });

Lascia un commento