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

페이지 정보

루루아빠 2,493 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,289,778
레벨 96
경험치 1,386,756

Progress Bar 66%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 1211 페이지
제목 글쓴이 날짜 조회 추천
jQuery  🏆 클릭 함수가 더블 클릭시에만 작동된다면 shadow2fox 2018.12.11 1,745 0
jQuery  🏆 모바일 및 태블릿에서 스크롤이 아닌 경우에만 터치 제어하기 shadow2fox 2018.08.13 1,810 0
jQuery  🏆 마우스 클릭 및 엔터를 일정 초 이상 유지하면 특정 url로 이동하기 shadow2fox 2018.07.11 1,867 0
jQuery  🏆 타겟 링크가 내 주소인지 외부 주소인지 확인하기 루루아빠 2018.05.22 1,927 0
jQuery  🏆 a href 속성 마우스 오버시 브라우저 하단 링크 주소 감추기 루루아빠 2017.08.29 2,710 0
jQuery  🏆 🚩 이미지 로딩 실패시 대체 이미지 보여주기 루루아빠 2017.07.18 2,494 1
jQuery  🏆 특정 부모 클래스 내부에 있지 않을 경우에만 적용하기 루루아빠 2017.02.06 2,233 0
jQuery  댓글+1🏆 button으로 유튜브 재생 및 정지 제어하기 루루아빠 2016.12.14 9,556 0
jQuery  댓글+1🏆 게시글 본문 내에 첨부된 이미지가 엑박으로 뜨는 경우 특정 이미지로 대체하기 루루아빠 2016.05.21 3,086 0
jQuery  🏆 Theia Sticky Sidebar 사용시 모달(modal)이 사이드바 아래로 내려가는 문제 해결하기 루루아빠 2016.03.16 3,443 0
jQuery  댓글+2🏆 사이드바를 고정하기 위한 Theia Sticky Sidebar 소개 및 적용법 루루아빠 2016.02.10 3,438 0
jQuery  댓글+2🏆 jQuery를 이용한 링크 자동 클릭(auto click) 루루아빠 2015.06.26 8,306 0