흥미로운 질문입니다!
div에 이미지를 추가하려고하면 div는 display : none;을 사용하여 숨길 수 있습니다.
그런 다음 성공적으로로드했는지 여부에 관계없이 이미지의 속성을 정기적으로 테스트하십시오 (setInterval 루프 사용). setInterval이 스스로를 죽일 시간 제한을 정의하십시오.
이 속성은 크롬과 파이어 폭스에서 성공 IMG 부하를 테스트하기 위해 작동합니다
fileCreatedDate != ''
테스트 모두를 만들기 위해 :
naturalHeight != 0
이 속성은 IE7,8,9에서 성공 IMG로드를 테스트하기위한 작업 그것은 모든 주요 브라우저에서 작동합니다.
로드 프로세스 중에 소품이 10ms 간격으로 어떻게 변하는 지 확인하는 방법은 다음과 같습니다. ! : 다른 브라우저로 크롬에서
http://jsfiddle.net/xGmdP/
그것을 시도하고 당신도 모든 이미지의 전체 속성을 확인하여 setInterval을 루프에 대한 타임 아웃을 대체 할 수있는 FF. 하지만 불행히도 이것은 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 단독으로는이 작업을 수행 할 수 없습니다. 이 경우인가요? –
다른 방법이 있습니까? 이것을 할 수 – FreshBits