E 'possibile verificare se un file restituisce un errore 404 se si trova su un server diverso con javascript o jQuery?

Question

E 'possibile verificare se un file restituisce un errore 404 se si trova su un server diverso usando jQuery/javascript?

Sto usando l'API di YouTube per ottenere uno screenshot HD per il video che sto incorporando, ma il JSON che restituisce non fornisce alcuna indicazione sul fatto che esista uno screenshot HD per il video.

l'URL per lo screenshot è di solito, http://img.youtube.com/vi/ + video.ID + /maxresdefault.jpg

ma quando non esiste, ottengo questo brutto bassa risoluzione POS grigio: http://img.youtube.com/vi/MAyTES9gDAU/maxresdefault.jpg

Quindi, in sostanza, voglio verificare se lo screenshot esiste e in caso contrario, applicare display: none al div che lo detiene.

Answer 1

Creare un elemento <img> che punta a quell'immagine, quindi gestire l'evento onerror e nasconderlo.

Answer 2

È possibile creare un oggetto Image e gestire onload e onerror. Funzionerà solo per immagini, mente.

function checkExists(imageUrl, callback) { 
    var img = new Image(); 

    img.onerror = function() { 
     callback(false); 
    }; 

    img.onload = function() { 
     callback(true); 
    }; 

    img.src = imageUrl; 
} 

Utilizzare in questo modo: risposta

checkExists(yourVideoUrl, function(exists) { 
    if(!exists) { 
     // Hide the image 
    } 
}); 

Here's a demo.

Answer 3

di MiniTech lavora per il controllo 404 di però ...

Per il caso di YouTube, che hanno la loro movimentazione, invece di darti un 404, ti danno una "bella" immagine di errore.

YouTube ha un'API che controllerà se l'ID video è valido. Dai un'occhiata a questo post che ti spiega come verificare se esiste un ID video di YouTube o è valido: https://groups.google.com/forum/?fromgroups=#!topic/youtube-api-gdata/oAztQ3f1tcM

Dopo aver verificato che il video esista, puoi provare a caricare l'immagine. Se il video non esiste, puoi gestire quel caso come preferisci.

Answer 4

Questo ha funzionato per me (il mio è in coffeescript).

checkImages = -> 
    $("img").each -> 
    $(this).error -> 
     $(this).attr("src", "../default/image.jpg") 

$(document).on('page:load', checkImages) 

sto cercando di indovinare l'equivalente javascript è qualcosa di simile

function checkImages() { 
    $("img").each(function() { 
    $(this).error(function() { 
     $(this).attr("src", "../default/image.jpg"); 
    }); 
    }); 
}; 

$(document).on("page:load", checkImages); 

Answer 5

È necessario aggiungere assegno extra per un default un'immagine grigia:

function checkExists(imageUrl, callback) { 
    var img = new Image(); 

    img.onerror = function() { 
     callback(false); 
    }; 

    img.onload = function() { 
     //check for a default (grey) image 
     if (this.width == 120) { 
      callback(false); 
     }else { 
      callback(true); 
     } 
    }; 

    img.src = imageUrl; 
} 

Demo