[jQuery] 이미지 로딩 실패시 대체 이미지 보여주기

페이지 정보

yadolee 루루아빠 3,122 1 2017.07.18 23:42:32

본문

이미지 로딩 실패시 대체 이미지 보여주기

<!-- no image 대체 설정 -->
<script type="text/javascript">
$(window).bind('load', function() {
    $('.board-view-con img').each(function() {
        if((typeof this.naturalWidth != "undefined" &&
            this.naturalWidth == 0 )
            || this.readyState == 'uninitialized' ) {
            $(this).attr('src', '/sample/image_not_found.png');
            $(this).addClass("broken_image");
            $('.broken_image').css('display', 'block');
            $('.broken_image').css('min-width', '200');
            $('.broken_image').css('max-width', '100%');
            $('.broken_image').css('height', 'auto');
            $('.broken_image').css('margin', '0 auto');
        }
    });
})
</script>
상기 스크립트는 board-view-con 클래스 아래 모든 img가 올바르게 로딩되는지 검사(이미지 넓이가 0이 아님)하고 로딩이 되지 않는 img 주소를 /sample/image_not_found.png로 변경해서 보여준다.
참고 : 이윰빌더는 게시글 보기시 board-view-con 클래스가 img 태그를 제어함으로 사용자 환경에 맞게 클래스명 혹은 아이디명을 상기 소스에 바꾼다.
/sample/image_not_found.png 이 부분 또한 사용자 환경에 맞게 바꾼다.
추천인 1
  • 012i1052u
    내사랑

댓글

첫 번째 댓글을 남겨 주세요

Total 7691326 페이지

제목 글쓴이 날짜 조회 추천
서버  🏆 Nginx에서 HTTP → HTTPS 301 리다이렉트(Redirect) 하기 루루아빠 2017.12.11 3.0k 0
제로  🏆 💾 [스킨만들기] view_foot.php(이전 다음글, 버튼 표시 부분)의 설명입니다 루루아빠 2005.06.23 3.0k 0
이윰  🏆 반응형 테마 PC에서 메인과 사이드 레이아웃 위치 변경하기 루루아빠 2016.11.22 3.0k 0
이윰  🏆 Eyoom Builder 1.3.13 패치 루루아빠 2017.11.21 3.0k 0
이윰  🏆 Eyoom Builder 1.3.15 패치 루루아빠 2018.01.05 3.0k 0
이윰  🏆 메인일때만 사이드 레이아웃을 없애기 루루아빠 2015.04.24 3.0k 0
이윰  🏆 이윰빌더 외부이미지 로컬 저장시 용량 줄이기 루루아빠 2017.11.23 3.0k 0
JavaScript  🏆 반응형 테마에서 Theia Sticky Sidebar 사용시 레이아웃이 중첩되는 문제 해결하기 루루아빠 2017.04.22 3.0k 0
기타  🏆 Font Awesome 4.7.0 - Form Control, Video Player, Chart, Text Editor, File Type, Spinner 루루아빠 2017.11.20 3.0k 0
제로  🏆 💾 등록실패 방지 (글 등록 실패로 인한 글날림 방지) 루루아빠 2005.07.05 3.0k 0
그누•영카트  🏆 📸 5.2.9.8.4 버전에서 5.3.1 정식버전으로 패치 루루아빠 2018.04.06 3.0k 0
이윰  🏆 블로그 스킨(blog skin) 갤러리 목록에서 box 이미지 높이 줄이기 루루아빠 2016.02.17 3.0k 0
그누•영카트  🏆 그누보드 5.1.10 패치 루루아빠 2015.12.23 3.0k 0
그누•영카트  🏆 영카트 5.1.4 (2015.11.02) 루루아빠 2015.11.09 3.0k 0
이윰  🏆 Eyoom Builder 3.0.9 패치 shadow2fox 2019.03.25 3.0k 0
그누•영카트  🏆 그누보드 5.1.19 패치 루루아빠 2016.07.06 3.0k 0
이윰  🏆 Eyoom Builder 1.3.2 패치 루루아빠 2017.11.21 3.0k 0
이윰  🏆 Eyoom Builder 1.3.8 패치 루루아빠 2017.11.21 3.0k 0
이윰  🏆 Eyoom Builder 3.0.6 패치 shadow2fox 2018.09.18 3.0k 0
그누•영카트  🏆 그누보드 5.1.16 패치 루루아빠 2016.04.23 3.0k 0
이윰  🏆 로그인 후에만 홈 들어가게 만들기 루루아빠 2015.04.28 3.0k 0
이윰  🏆 🎞️ 검색시 본문 내용 나오지 않게 하기 루루아빠 2015.11.15 3.0k 0
그누•영카트  🏆 🎞️ 그누보드 5.1.8 패치 루루아빠 2015.11.25 3.0k 0
이윰  🏆 최신글에서 글 작성 시간을 나타내지 않기 루루아빠 2017.02.16 3.0k 0
이윰  🏆 Eyoom Builder 1.2.6 패치 루루아빠 2016.08.26 3.0k 0
그누•영카트  🏆 [보안패치] 그누보드 5.0.33 루루아빠 2015.05.13 3.0k 0
그누•영카트  🏆 5.2.1 토큰패치로 댓글 달린 본인 댓글 수정 못하는 문제 루루아빠 2016.08.22 3.0k 0
이윰  🏆 Q&A 게시판 최신글추출시 '비밀글입니다.' 를 원글 제목으로 변경하기 루루아빠 2015.10.20 3.0k 0
제로  댓글+1🏆 서버OS가 WindowsNT일경우 가입폼에서 메일체크 에러방지 루루아빠 2005.07.07 3.0k 0
이윰  🏆 Eyoom Builder 1.1.8 추가 수정사항 루루아빠 2015.07.30 3.0k 0