Ich habe URLs im JSON-Feed und jede URL enthält ein Bild. Ich möchte die URLs validieren, die ein Bild enthalten oder nicht (NULL). Wie zu validieren diese mit Javascript. da ich ein Anfänger bin, weiß ich nicht, wie dies zu validieren. danke
JSON feed with image n NULL
{
previewImage:"http://123.201.137.238:6060/feed/videoplay/Jackie.png",
},
{
previewImage:"http://www.snovabits.net/feed/ImageMI/WarCraft.jpg",
},Interessante Frage!
Versuchen Sie, die Bilder in ein div einzufügen (verwenden Sie jQuery, das div kann versteckt werden mit Anzeige:keine; ).
Testen Sie dann regelmäßig die Eigenschaften der Bilder (verwenden Sie eine setIntervall Schleife), ob sie eine erfolgreiche Ladung anzeigen. Definieren Sie eine Zeitüberschreitung, nach der sich das setInterval selbst beendet.
Diese Eigenschaft eignet sich zum Testen des erfolgreichen Ladens von Bildern in Chrome und Firefox:
naturalHeight != 0Diese Eigenschaft dient zum Testen des erfolgreichen Ladens von Bildern im IE7, 8 und 9:
fileCreatedDate != ''Testen Sie beides, damit es in allen gängigen Browsern funktioniert.
Hier ist ein Fiddle, um zu sehen, wie sich die Requisiten während des Ladevorgangs in 10ms-Schritten verändern. Probieren Sie es in verschiedenen Browsern aus!:
http://jsfiddle.net/xGmdP/
In Chrome und FF können Sie sogar die Zeitüberschreitung für die setInterval-Schleife ersetzen, indem Sie die vollständig Eigenschaft aller Bilder. Aber leider funktioniert dies nicht im IE ( vollständig bleibt im IE bei Bildern, die nicht geladen werden können, immer falsch).
Zum Schluss noch der vollständige Code der Fiddle:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/JavaScript"></script>
<script type="text/JavaScript">
$(function(){
$('#images').prepend('<img id="img1" src="http://123.201.137.238:6060/feed/videoplay/Jackie.png">')
$('#images').prepend('<img id="img2" src="http://www.snovabits.net/feed/ImageMI/WarCraft.jpg">')
setInterval(test, 10);
})
function test(){
var props=['naturalHeight', 'complete', 'fileCreatedDate', 'clientHeight', 'offsetHeight', 'nameProp', 'sourceIndex'];
for(i in props){
var pr = props[i];
$('#testresults').append('1:'+pr+' = ' + $('#img1').prop(pr)+'<br>');
$('#testresults').append('2:'+pr+' = ' + $('#img2').prop(pr)+'<br>');
}
$('#testresults').append('---<br>');
}
</script>
</head>
<body>
<div id="images"><div>
<div id="testresults"></div>
</body>
</html>
Wenn Sie prüfen wollen, ob die Zeichenkette null ist, tun Sie einfach if(previewImage == "") { /* image is null, do stuff */ } aber wenn Sie überprüfen wollen, ob das Bild tatsächlich existiert, würde ich vorschlagen, eine GET-Anfrage über AJAX zu stellen und die HTTP-Antwort zu überprüfen, z.B.: (jQuery):
$.ajax({
url: "http://123.201.137.238:6060/feed/videoplay/Jackie.png",
cache: false,
error: function(){
alert("image doesn't exist!");
}
});Aber es wäre "schöner", dies serverseitig zu tun, wenn möglich.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
