이미지의 'onerror' 속성이 Chrome과 Mozilla에서 다르게 동작하는 이유는 무엇입니까?

Onerror 속성으로 이미지 로드 문제 해결

웹 개발에서 링크 끊어짐이나 서버 오류로 인해 이미지가 로드되지 않는 시나리오를 자주 접하게 됩니다. img 요소의 onerror 속성을 사용하면 표시할 대체 이미지를 지정하여 이러한 상황을 처리할 수 있습니다. 그러나 사용자들은 다양한 브라우저, 특히 Chrome과 Mozilla에서 기능이 일관되지 않는다고 보고했습니다.

문제를 설명하기 위해 다음 코드 조각을 고려해 보겠습니다.

<code class="html"><img src="invalid_image.jpg" onerror="this.src='alternate_image.jpg';"></code>

이 코드는 잘못된 소스에서 이미지를 로드합니다. 이미지 로드에 실패하면 onerror 핸들러가 트리거되어 손상된 이미지를 지정된 대체 이미지로 교체해야 합니다. 그러나 사용자는 Internet Explorer 이외의 브라우저에서는 이 접근 방식이 작동하지 않는다는 사실을 발견했습니다.

이 동작의 근본적인 이유는 브라우저가 onerror 이벤트를 다르게 처리하기 때문입니다. Chrome 및 Mozilla와 같은 일부 브라우저는 대체 이미지가 로드되지 않아 무한 루프가 발생하는 경우 이벤트를 여러 번 트리거합니다. 이를 방지하려면 다음 수정된 코드를 사용하여 첫 번째 시도 후 onerror 핸들러를 무효화해야 합니다.

<code class="html"><img src="invalid_image.jpg" onerror="this.onerror=null;this.src='alternate_image.jpg';"></code>

onerror 핸들러를 무효화함으로써 이벤트가 한 번만 트리거되어 무한 루프를 방지할 수 있습니다. . 이 접근 방식은 Chrome, Mozilla, Internet Explorer를 포함한 여러 브라우저에서 일관되게 작동합니다.

위 내용은 이미지의 'onerror' 속성이 Chrome과 Mozilla에서 다르게 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!