상태 이미지 확인 방법 자바 스크립트로드

Question

새 프로젝트를 진행하고 있으며 다른 웹 사이트에서 사진을 찍고 있습니다.

문제는 사진을 찍을 때 가끔 404 오류 상태입니다. DOM에서 이러한 이미지를 제거했지만 링크가 깨진 경우 실제 웹 사이트에 오류가 있습니다 (예 : http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large)

유일한 정보는 다음과 같습니다. 리소스를로드하지 못했습니다. 서버가 404 상태로 응답했습니다 (찾을 수 없음).

저에게 해결책이있는 사람이 있습니까? 사전에

$('img').error(function(){ 
    $(this).hide().parents('a').parents('li').remove(); 
}); 

감사 :

깨진 이미지를 검출 내 코드가있다!

Answer 1

정말 어렵습니다. 내가 생각할 수있는 최선의 해결책이 여기있다.

1 단계 : 다양한 이미지 소스에서 404 개의 대체 이미지를 모두 다운로드하십시오. 이러한 이미지를 base64 문자열로 변환하고 해당 문자열을 js의 배열에 저장하십시오.

단계 : How to convert image into base64 string using javascript가

3 단계 : : 404 화상을 base64 어레이 테스트 통해 루프 다운로드 된 이미지의베이스 64 문자열 어떠한 일치하면 가상 캔버스 태그를 사용하여베이스 64 문자열로 다운로드 된 이미지를 변환 배열에있는 것들 중 하나. jQuery로 이미지의 트리거 '오류'와 일치하는 경우 기존 .error 스크립트를 재사용하십시오.

Answer 2

문제에 대한 솔루션이 더 간단하지만 일부 서버 측 코드가 필요합니다 (마지막 부분에서 설명). 따라서, JS는 다음과 같이 표시됩니다 크로스 도메인 요청이 허용되지 않기 때문에

$("img").each(function() 
{ 
    // Check each target image and try to resolve its src 
    $.ajax(
    { 
     url: $(this)[0].src, 
     type: "get", 
     context: $(this), 
     error: function() 
     { 
      // Delete on error (404) 
      $(this).remove(); 
      console.log("ERR!"); 
     }, 
     success: function(data) 
     { 
      // It's OK! 
      console.log("YEAH!"); 
     } 
    }); 
}); 

, 당신은 축복하는 서버 이미지 콘텐츠를 전달하는 간단한 프록시 스크립트를 작성해야합니다.

예 : yoursite.com/imageproxy?src=http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large은 원본 헤더가있는 http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large 이미지의 콘텐츠를 반환합니다.

UPDATE :

@Fresheyeball 응답에 코멘트에 그림으로 :

업데이트 2 : 또한

, 당신이 brain.js를 사용하려고 할 수 있다고 생각 신경망을 훈련시켜 나중에 색상과 비교할 때 도움이됩니다. 하지만 ...

이미지에 4 문자열 프록시 (물론 무제한 대역폭이있는 경우)를 작성하는 것이 더 쉽습니다.