CSS – background-image 로딩 실패시 처리.

<img> 태그에는 src에 지정된 이미지 로딩 실패시 onerror에 script를 추가해서 대체 이미지를 노출할 수 있는데, img태그가 아닌 여타 다른 태그에서 background-image로 특정 이미지를 로딩시 실패하는 경우에도 동일한 대체이미지를 넣고자 하는 needs가 있어서… 찾아보니..

무식하게 처리하는 방법과 간단히 처리하는 방법이 있는데…우선 무식하게 처리하는건 script로 Image객체를 생성해서 대상 이미지를 불러보고 없을때는 Image객체인스턴스.onerror = function() { //blah blah blah }  형태로 에러처리를 수행하면 되고…

좀더 검색을 하다보니 background-image 속성 자체에 url() 을 두개 주면 쉽게 해결 된다는……
obj.style.background-image:url(원본), url(실패시)

http://stackoverflow.com/questions/7816951/css-extra-background-image-for-when-the-first-image-doesnt-load

 

역시 검색을 잘해야….삽질을 덜 함.