興味深い質問!
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>
あなたは、好ましくは、他の人がアクセスできるリンクで、サンプルJSONを投稿することができます。また、これまでに書いた/試したコードを投稿してください。 –
すべての画像がJavaScriptと同じドメイン上にホストされていない限り、JavaScript単独ではこれを行うことはできません。これは本当ですか? –
他にもありますか?これを行うには – FreshBits