2011-12-08 5 views
5

JSONフィードにURLがあります。各URLには1つの画像が含まれています。画像があるかどうかを確認したい(NULL)。 JavaScriptを使用してこれを検証する方法。 私は初心者なので、これを検証する方法はわかりません。 (:あなたは文字列がnullであるかどうかを確認したい場合は感謝URL(Javascript)でコンテンツを検証する方法

 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", 

     }, 
+1

あなたは、好ましくは、他の人がアクセスできるリンクで、サンプルJSONを投稿することができます。また、これまでに書いた/試したコードを投稿してください。 –

+0

すべての画像がJavaScriptと同じドメイン上にホストされていない限り、JavaScript単独ではこれを行うことはできません。これは本当ですか? –

+0

他にもありますか?これを行うには – FreshBits

答えて

1

興味深い質問!

divに画像を追加しようとします(jQueryを使用すると、divはdisplay:none;を使用して非表示にすることができます)。
次に、正常に読み込まれたことを示すかどうかにかかわらず、イメージのプロパティを定期的にテストします(のsetIntervalループを使用します)。いくつかのタイムアウトを定義すると、setIntervalはそれ自身を強制終了します。

このプロパティはChromeとFirefoxで成功したのimg負荷をテストするために動作します:

fileCreatedDate != '' 

テストの両方を作るために:

naturalHeight != 0 

このプロパティは、IE7,8,9に成功したのimg負荷試験のために働きますそれはすべての主要なブラウザで動作します。

ここでは、ロードプロセス中に小道具が10msステップでどのように変化するかを知るためのフィドルです。 !:
http://jsfiddle.net/xGmdP/

Chromeの場合

とFF異なるブラウザでそれを試してみてくださいあなたも、すべての画像の完全プロパティをチェックしてたsetIntervalループのタイムアウトを置き換えることができます。しかし残念ながら、これはIEでは機能しません(は、ロードできない画像のIEでは常にfalseのままです)。最後に、ここで

はフィドルの完全なコードです:

<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> 
+0

WOw!すばらしいです!私はまさにこの答えを期待しています。あなたのお返事ありがとうございました。 – FreshBits

0

だけif(previewImage == "") { /* image is null, do stuff */ }を行うができますが、画像が実際に存在するかどうかを確認したい場合、私はAJAXを経由してGETリクエストをやって提案し、HTTPレスポンスを確認します、例えばjQuery):

$.ajax({ 
    url: "http://123.201.137.238:6060/feed/videoplay/Jackie.png", 
    cache: false, 
    error: function(){ 
     alert("image doesn't exist!"); 
    } 
}); 

しかし、可能であれば、このサーバー側を行う方が「よかった」でしょう。

+1

素晴らしいアイデアだが、私にとってはうまくいかない。画像は存在しますが、警告が発生します。 – Jpsy

関連する問題