이미지 요소의 onerror 속성이 브라우저에서 일관되지 않게 작동하는 이유는 무엇입니까?

이미지 요소에 onerror 속성 사용

HTML에서 onerror 속성을 사용하면 이미지 실패 시 수행할 작업을 지정할 수 있습니다. 로드합니다. 그러나 이 속성은 특정 브라우저에서 항상 예상대로 작동하지 않는 것으로 나타났습니다.

onerror 속성을 사용하여 손상된 이미지의 소스를 변경하는 제공된 예에서 동작은 브라우저마다 다릅니다. . 이 문제를 해결하려면 수정된 접근 방식이 필요합니다.

아래의 업데이트된 코드 조각은 IE와의 호환성을 유지하면서 Chrome 및 Mozilla의 문제를 해결합니다.

<code class="css">.posting-logo-div {
}
.posting-logo-img {
  height: 120px;
  width: 120px;
}
.posting-photo-div {
  height: 5px;
  width: 5px;
  position: relative;
  top: -140px;
  left: 648px;
}
.posting-photo-img {
  height: 240px;
  width: 240px;
}</code>

<code class="html"><div id="image" class="posting-logo-div">
  <img src="invalid_link"
       onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
   class="posting-logo-img"
  />
</div>
<div id="photo" class="posting-photo-div">
  <img src="invalid_link"
       onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
       class="posting-photo-img"
  />
</div></code>

this.onerror=null을 사용하는 onerror 핸들러; 이미지 소스를 변경하기 전에 백업 URL도 유효하지 않은 경우 발생할 수 있는 무한 루프를 방지할 수 있습니다.

이 접근 방식의 실시간 데모는 http://jsfiddle.net/oLqfxjoz/에서 확인할 수 있습니다.

위 내용은 이미지 요소의 onerror 속성이 브라우저에서 일관되지 않게 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!