2011-12-08 2 views
5

각 URL에 JSON 피드에 URL이 하나 있습니다. 각 URL에 이미지가 하나 있습니다. 이미지가 있거나없는 URL (NULL)의 유효성을 검사하고 싶습니다. 자바 스크립트를 사용하여이를 확인하는 방법. 저는 초보자이기 때문에 이것을 어떻게 검증하는지 모르겠습니다. 감사URL (자바 스크립트)의 콘텐츠 유효성을 검사하는 방법

 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 단독으로는이 작업을 수행 할 수 없습니다. 이 경우인가요? –

+0

다른 방법이 있습니까? 이것을 할 수 – FreshBits

답변

1

흥미로운 질문입니다!

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

WOw! 큰! 나는이 대답을 정확히 기대한다. 응답 해주셔서 감사합니다. – FreshBits

0

문자열이 null의 경우 검사 할 경우 바로 할 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

관련 문제