[jQuery] 이미지 로딩 실패시 대체 이미지 보여주기
페이지 정보
루루아빠
3,097 1
2017.07.18 23:42:32
짧은주소
-
https://yadolee.com/tip/482 주소복사
본문
이미지 로딩 실패시 대체 이미지 보여주기
<!-- 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
레벨 101
경험치 1,519,440
Progress Bar 14.66%
- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS
BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑
루루아빠랍니다~~
최신댓글이 없습니다.


댓글
첫 번째 댓글을 남겨 주세요