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

페이지 정보

루루아빠 2,513 1 2017.07.18 23:42

평점

  • 평점 : 0점 (0명 참여)

본문

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

<!-- 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
  • 내사랑
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,291,706
레벨 96
경험치 1,391,448

Progress Bar 82%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

Total 7471838 페이지
제목 글쓴이 날짜 조회 추천
jQuery  🏆 모바일 및 태블릿에서 스크롤이 아닌 경우에만 터치 제어하기 shadow2fox 2018.08.13 1,837 0
이윰  🏆 Eyoom Builder 1.1.12 패치 루루아빠 2015.10.19 2,920 0
CSS  🏆 특정 아이디나 클래스 이후에 특정 아이디나 클래스가 있을 때 shadow2fox 2018.08.15 1,952 0
제로  🏆 로그아웃시 현재접속자 리스트에서 바로 안나오게 하기 루루아빠 2005.07.14 2,331 0
이윰  🏆 Bootstrap's Accordion 모두 펼치기 루루아빠 2015.10.20 2,801 0
그누•영카트  댓글+1🏆 [PHP 7.2.x] count(): Parameter must be an array or an object that implements Countable 에러 해결하기 shadow2fox 2018.08.19 6,512 0
제로  🏆 💾 특정 회원에게 쪽지 스킨을 적용해봅시다 루루아빠 2005.07.19 2,600 0
이윰  🏆 Q&A 게시판 최신글추출시 '비밀글입니다.' 를 원글 제목으로 변경하기 루루아빠 2015.10.20 2,629 0
이윰  🏆 공지글에는 댓글 기능 끄기 shadow2fox 2018.08.19 2,004 0
제로  🏆 💾 업로드된 이미지가 있을때에 게시판 목록에 그림 아이콘 표현하기 루루아빠 2005.07.19 2,819 0
이윰  🏆 Eyoom Builder 1.1.13 패치 루루아빠 2015.10.26 2,677 0
이윰  🏆 Eyoom Builder 3.0.3 - 패치에 문제가 있는 버전입니다. shadow2fox 2018.08.20 2,180 0
그누•영카트  🏆 영카트 5.4.4.9.1 shadow2fox 2021.02.06 1,344 0
제로  🏆 최근 갤러리 & 갤러리 목록 이미지 흑백 설정 루루아빠 2005.07.20 2,839 0
그누•영카트  🏆 구글 웹폰트를 적용해보자 루루아빠 2015.10.27 2,466 0
이윰  🏆 Eyoom Builder 3.0.4 패치 shadow2fox 2018.08.20 2,692 0
그누•영카트  🏆 영카트 5.4.5.1 shadow2fox 2021.02.06 1,281 0
제로  🏆 글쓴 후 하단 리스트에 특정 카테고리 글만 보여주지 않고 전체 목록을 보여주기 루루아빠 2005.07.23 3,127 0
이윰  🏆 Eyoom Builder 1.1.14 패치 루루아빠 2015.10.30 3,219 0
JavaScript  🏆 사용자의 브라우저를 검출하는 방법 shadow2fox 2018.08.22 1,824 0