>웹 프론트엔드 >JS 튜토리얼 >JavaScript는 alt_javascript 트릭 대신 onerror를 사용하여 기본 이미지 표시를 설정합니다.

JavaScript는 alt_javascript 트릭 대신 onerror를 사용하여 기본 이미지 표시를 설정합니다.

PHP中文网
PHP中文网원래의
2016-05-16 15:12:591528검색

JavaScript 코드

 //图像加载出错时的处理
function errorImg(img) {
img.src = "默认图片.jpg";
img.onerror = null;
}

html 코드

<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />

미용을 위해 웹페이지 이미지가 없을 경우 포크 이미지는 표시되지 않습니다

페이지가 표시될 때 이미지가 이동되거나 유실되면 X 표시가 있는 이미지가 페이지에 표시되므로 사용자 경험에 큰 영향을 미칩니다. Alt 속성을 사용하여 "Picture XX"라는 프롬프트 메시지를 표시하더라도 큰 효과는 없습니다.
사실 다음과 같이 처리할 수 있습니다. 사진이 없으면 onerror 이벤트가 트리거됩니다. 이 이벤트에서 다음과 같은 몇 가지 수정 작업을 수행할 수 있습니다.

1. 이 그림 요소를 숨기세요:

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.style.display=&#39;none&#39;"/>

2. 기본 그림으로 바꿉니다:

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src=&#39;默认图片的url地址&#39;"/>

참고: 잘못 사용하면 IE 기반 브라우저에서 무한 루프가 발생합니다. 예를 들어 [기본 이미지의 URL 주소]가 로드되지 않거나(예: 네트워크 속도가 상대적으로 느린 경우) 존재하지 않는 경우 반복적으로 로드되어 결국 스택 오버플로 오류가 발생합니다.

따라서 문제를 해결하려면 다음 두 가지 방법을 사용해야 합니다.

a. onerror 코드를 다른 처리 방법으로 변경하거나 기본 이미지가 onerror는 충분히 작고 존재합니다.

b. onerror 이벤트가 한 번만 발생하도록 제어하려면 다음 문장을 추가해야 합니다. 추가한 후 다음과 같습니다.

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src=&#39;默认图片的url地址;this.onerror=null&#39;"/>

테스트 결과 위의 방법은 모든 버전의 IE와 Google 및 Firefox 브라우저에서 지원됩니다.

위 내용은 alt_javascript 기법 대신 onerror를 사용하여 기본 이미지 표시를 설정하는 방법입니다. 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.