[javascript] 이미지 로드 시 실패할 경우(404) 대체 이미지 처리

하.. 이걸 처리하려고 얼마나 삽질했던가..

크롬이 업데이트 되면서 404 이미지들에 대해 엑박노출을 하지 않게 되었다.

이미지에 삭제 버튼을 올려놓았는데 이미지가 노출이 안되니 버튼도 노출이 안되서 매번 개발자가 손수 처리해줘야 하는 상황이 되었기에 

404 이미지에 대해서는 빈 이미지를 올려주어 버튼이 노출되도록 하고자 시작하였다.

처음에 처리했던 코드는 아래와 같다

 
$(function(){
    $("img").on("error", function(){
        var uri = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="; //blank image code
        $(this).attr('src', uri);
    });
});

error가 걸렸다가 안걸렸다가 하는 문제가 발생했다 -_-

img태그에 onError로 스크립트 처리하면 바로 해결되는 문제지만 기존에 코드가 복잡하고 (img 태그가 여기저기 들어가있기 때문에 일일히 넣어주는건 무리무리무리)

img src 정보도 php 코드와 섞여서 페이지가 그려지면서 그대로 들어가기 때문에 열심히 구글링한 정보는 내겐 무의미 했다 ㅜㅜ 

처음 로드될 때 error 이벤트를 처리할 수 있도록 넣어주고 싶었는데 그것도 쉽지 않았다

$(window).load든 $(document).ready든 모두 소용 없음 T_T

아마 img 태그가 그려지는 시점이 DOM이 그려지는 동시에 처리되서 인듯 하다 

간헐적으로 좀 느리게 처리될 뿐..?

$(function() {
    $("img").each( function(i, ele){
         var uri = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
	//이미 load된 이미지들을 처리하기 위한 코드
        if( ele.src != '' && ele.complete == true && ele.naturalWidth == 0 ){
            $(this).attr("src", uri );
            $(this).attr("width", "150px");
        }
        //load되지 않은 이미지들은 load와 error 이벤트를 추가해준다
        $(this).load( function(n){
            //do nothing
        })
        .error( function(){
            $(this).attr("src", uri );
            $(this).attr("width", "150px");
        });
	});
});

이렇게 하니까 문제 없이 해결할 수 있었다.;

load 여부 (complete 플래그값 확인)와 load된 이미지의 사이즈를 확인하여 제대로 불려졌는지를 체크했다

img 태그 중에 src값이 없는 애들도 있기 때문에 얘들은 빈 이미지를 넣으면 안되므로 이부분도 체크하였다.

(complete 속성은 모든 브라우저 OK지만 naturalWidth는 IE 9버전부터 지원함)