하드코딩이 싫어요

이미지 태그를 이용할 시 참조하는 이미지가 없을 경우를 대비해 대체할 이미지를 보여주는 기능이 있다.

바로 onError라는 속성인데 작성하는 방식은 아래와 같다.

<img src="aaa.domain.com/bbb.jpg" onError=this.src="aaa.domain.com/ccc.png">

하지만, 이 부분에서도 무한루프에 빠지는 허점이 있다.

bbb.jpg에 접근하였더니, 존재하지 않아 ccc.png에 접근했는데

이 파일 또한 존재하지 않았을 경우 다시 onError를 호출하여 또 파일을 찾는 것이었다.

<img src="aaa.domain.com/bbb.jpg" onError="this.onerror=null; this.src='aaa.domain.com/ccc.png'">

이렇게 onError부분에 코딩하게 되면, 기본 src의 참조오류로 인한 onError 호출할 때 null로 처리되며..

이후 error의 src가 참조를 못하였을 경우, 앞서 null로 처리하였기 때문에 무한루프에서 벗어날 수 있다.

혹시, 잘못된 부분이나, 더 좋은 정보가 있다면 공유 부탁합니다.

background-image: url("")

url() 괄호 안에 빈 값 등이 들어간다면, 불필요하게 현재 페이지의 서버를 재호출하게 된다.

필자는, 그리드에 셀 안 내용으로 구성하였었는데, 그리드가 재구성 될 때마다 혹은 스크롤에 의해서

서버가 반복적으로 재호출 되는 경험을 했었다.

문제는 정말 예상하지 못한.. 다른곳에 있었다.

바로 url("") ! 

기존에 있던 CSS를 사용하되, CSS에 명시된

background-image만 사용하지 않으려고 저렇게 코딩을 했던것이 문제였다.

해당 background-image를 사용하지 않는 방법은

background-image: none;

이거로 대체 하였더니, 서버 재호출 문제는 사라졌다.