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

페이지 정보

루루아빠 2,534 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,294,164
레벨 97
경험치 1,397,066

Progress Bar 1%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 7481838 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 일반 회원과 특정 레벨 회원을 나타내는 변수 루루아빠 2015.04.23 2,733 0
에디터  🏆 smarteditor2 로 사진 첨부시 에디터 크기에 맞게 리사이즈 루루아빠 2015.04.23 3,341 0
이윰  🏆 게시글 보기시 본문에 포함된 주석 감추기 shadow2fox 2019.05.01 1,879 0
이윰  🏆 이윰 조건문 변수 모음 루루아빠 2015.04.23 2,771 0
그누•영카트  🏆 그누보드 5.1.15 패치 루루아빠 2016.03.21 3,088 0
그누•영카트  🏆 영카트 5.1.15 패치 루루아빠 2016.03.21 2,567 0
이윰  🏆 내글반응 페이지 내 전체 선택 체크박스 올바르게 적용하기 shadow2fox 2019.05.06 2,011 0
에디터  🏆 CKeditor4.x 에디터 상 엔터를 쉬프트+엔터 바꾸기 루루아빠 2015.04.24 3,170 0
이윰  🏆 글 작성시 익명으로만 글 작성하게 하기 루루아빠 2016.03.29 2,811 0
이윰  🏆 메인일때만 사이드 레이아웃을 없애기 루루아빠 2015.04.24 2,665 0
이윰  🏆 Eyoom Builder 1.2.3 패치 루루아빠 2016.03.29 2,912 0
에디터  🏆 CKeditor4.x 에 폰트 추가하기 루루아빠 2015.04.28 3,146 0
이윰  🏆 Eyoom Builder 1.2.4 패치 루루아빠 2016.04.23 2,487 0
이윰  🏆 로그인 후에만 홈 들어가게 만들기 루루아빠 2015.04.28 2,653 0
그누•영카트  🏆 그누보드 5.1.16 패치 루루아빠 2016.04.23 2,482 0
그누•영카트  🏆 영카트 5.1.16 패치 루루아빠 2016.04.23 2,498 0
그누•영카트  🏆 영카트 상품 증가 감소 선택 문자 바꾸기 루루아빠 2015.05.01 3,341 0
JavaScript  🏆 모달창(Modal Window) backdrop(모달창 바깥 부분) 클릭시 모달창 닫지 않기 루루아빠 2016.05.06 3,424 0
이윰  🏆 본문 내용 추출시 특정 태그 제거하기 루루아빠 2016.05.09 2,526 0
그누•영카트  🏆 그누보드 5.3.2.9 shadow2fox 2019.05.30 1,709 0