오늘은 페이지 개발 과정에서 깨진 이미지를 처리하는 방법에 대한 약간의 요령을 설명하겠습니다.
즉, 이미지가 성공적으로 로드되지 않으면 어떻게 될까요?
1단계: HTML 페이지에서:
gbin1 🎜>< 스크립트 src="http://ajax/libs/jquery/1.9.1/jquery.min.js">
머리>
<본문>
이 페이지를 모두 실행하시면 깨진 이미지가 보일 것입니다.
2부: JavaScript이며 기능은 다음과 같습니다. 그림이 깨지면 오류 메시지가 나타납니다.
코드 복사
코드는 다음과 같습니다. $(function(){ $('img').error(function(){ alert('error') ;
});
})
보이시나요?
3부: 다음으로, attr을 호출하여 깨진 이미지를 기본 이미지로 바꿀 수 있습니다.
복사 코드
코드는 다음과 같습니다. $(function(){ $('img').error(function(){ // 경고('오류');
$(this).attr('src','http://www.gbtags.com/gb/networks/themes/img/logohover.png')
} );
});
긱 레이블의 로고 아이콘을 보셨나요? 이러한 방식으로 분할 그래프 처리를 실현할 수 있습니다.
추가할 말: 사실 jquery 1.8 이전에는 오류 사용이 옹호되었지만 jquery 1.9 이후에는 덜 옹호되었지만 여전히 사용할 수 있으며 개인적으로 꽤 편리하다고 생각합니다.
다음 방법을 사용할 수도 있습니다. (오류는 on으로 대체되고 그 뒤에 매개변수가 옴)
코드 복사
코드는 다음과 같습니다: $(function(){ $('img').on('error',function(){ alert('error');
$(this).attr('src','http://www.gbtags.com/gb/networks/themes/img/logohover.png')
})
}) ;
사실 이전 오류 메서드는 on 메서드의 지름길입니다.
그런데 로컬에서 오류 메서드를 테스트하는 경우 서버를 시작해야 합니다. 리소스가 사용 가능한지 확인해야 합니다. 예를 들어, test.html의 경우 서버를 시작한 후 브라우저에 http://localhost:8080/test.html을 입력해야 효과를 확인할 수 있습니다.
모두에게 도움이 되었으면 좋겠습니다, 3Q!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
