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='none'"/>
2. 기본 그림으로 바꿉니다:
为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>
참고: 잘못 사용하면 IE 기반 브라우저에서 무한 루프가 발생합니다. 예를 들어 [기본 이미지의 URL 주소]가 로드되지 않거나(예: 네트워크 속도가 상대적으로 느린 경우) 존재하지 않는 경우 반복적으로 로드되어 결국 스택 오버플로 오류가 발생합니다.
따라서 문제를 해결하려면 다음 두 가지 방법을 사용해야 합니다.
a. onerror 코드를 다른 처리 방법으로 변경하거나 기본 이미지가 onerror는 충분히 작고 존재합니다.
b. onerror 이벤트가 한 번만 발생하도록 제어하려면 다음 문장을 추가해야 합니다. 추가한 후 다음과 같습니다.
为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址;this.onerror=null'"/>
테스트 결과 위의 방법은 모든 버전의 IE와 Google 및 Firefox 브라우저에서 지원됩니다.
위 내용은 alt_javascript 기법 대신 onerror를 사용하여 기본 이미지 표시를 설정하는 방법입니다. 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!