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

페이지 정보

yadolee 루루아빠 2,987 1 2017.07.18 23:42:32

평점

  • 평점 : 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
  • 012i1052u
    내사랑
yadolee
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,335,207
레벨 100
경험치 1,493,846

Progress Bar 29.49%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 7631226 페이지

제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 그누보드 5.1.18 패치 루루아빠 2016.05.17 2,710 0
그누•영카트  🏆 영카트 5.2.9.8.4 패치 루루아빠 2018.03.30 2,710 0
그누•영카트  🏆 그누보드 5.3.1.3 패치 루루아빠 2018.05.29 2,712 0
그누•영카트  🏆 🎞️ 영카트 5.1.6 패치 루루아빠 2015.11.17 2,716 0
그누•영카트  🏆 영카트 5.2.9.7 패치 루루아빠 2017.12.16 2,718 0
제로  댓글+1🏆 서버OS가 WindowsNT일경우 가입폼에서 메일체크 에러방지 루루아빠 2005.07.07 2,723 0
제로  🏆 검색 버그 고치기 루루아빠 2005.07.08 2,724 0
이윰  🏆 Eyoom Builder 3.0.3 - 패치에 문제가 있는 버전입니다. shadow2fox 2018.08.20 2,724 0
제로  🏆 태그 사용 체크 후 "취소" 하면 자동으로 체크 해제 루루아빠 2005.07.05 2,725 0
그누•영카트  🏆 그누보드 5.2.9.3 패치 루루아빠 2017.09.14 2,727 0
그누•영카트  댓글+1🏆 영카트 5.1.5 패치 루루아빠 2015.11.09 2,729 0
이윰  🏆 🎞️ Input 관련 버튼과 이윰 버튼 정렬 맞추기 루루아빠 2015.11.17 2,734 0
이윰  🏆 Eyoom Builder 1.3.15 패치 루루아빠 2018.01.05 2,734 0
제로  🏆 💾 [스킨만들기] list_head.php의 설명 2 루루아빠 2005.06.23 2,735 0
이윰  🏆 Eyoom Builder 3.0.6 패치 shadow2fox 2018.09.18 2,736 0
서버  🏆 Nginx에서 HTTP → HTTPS 301 리다이렉트(Redirect) 하기 루루아빠 2017.12.11 2,739 0
이윰  🏆 이윰빌더 외부이미지 로컬 저장시 용량 줄이기 루루아빠 2017.11.23 2,744 0
그누•영카트  🏆 영카트 5.1.14 패치 루루아빠 2016.03.08 2,748 0
그누•영카트  🏆 그누보드 5.1.5 패치 (2015.11.02) 루루아빠 2015.11.09 2,749 0
그누•영카트  🏆 💾 다음 스마트 워크를 이용해 소유 도메인으로 메일 서비스 이용하기 루루아빠 2017.03.27 2,751 1
이윰  🏆 Eyoom Builder 1.3.13 패치 루루아빠 2017.11.21 2,751 0
제로  🏆 💾 [스킨만들기] view_foot.php(이전 다음글, 버튼 표시 부분)의 설명입니다 루루아빠 2005.06.23 2,752 0
이윰  🏆 Eyoom Builder 3.0.9 패치 shadow2fox 2019.03.25 2,752 0
이윰  🏆 특정 게시판에 다른 헤더 파일 불러오기 루루아빠 2016.10.01 2,753 0
이윰  댓글+1🏆 관리자는 쪽지 보낼 때 캡챠코드 적용하지 않기 shadow2fox 2019.01.10 2,754 1
이윰  🏆 반응형 테마 PC에서 메인과 사이드 레이아웃 위치 변경하기 루루아빠 2016.11.22 2,757 0
이윰  🏆 블로그 스킨(blog skin) 갤러리 목록에서 box 이미지 높이 줄이기 루루아빠 2016.02.17 2,765 0
그누•영카트  🏆 그누보드 5.1.13 패치 루루아빠 2016.02.24 2,774 0
그누•영카트  🏆 영카트 5.2.9.8.3 패치 루루아빠 2018.03.22 2,776 0
제로  🏆 💾 등록실패 방지 (글 등록 실패로 인한 글날림 방지) 루루아빠 2005.07.05 2,779 0