깨진 이미지를 JavaScript 또는 jQuery로 대체하려면 어떻게 해야 합니까?

깨진 이미지를 jQuery/JavaScript로 대체

깨진 이미지는 웹 페이지의 미관을 손상시켜 사용자에게 불완전하거나 시각적으로 매력적이지 않은 경험을 선사할 수 있습니다. . 다행스럽게도 jQuery와 JavaScript는 이 문제를 우아하게 처리할 수 있는 도구를 제공합니다.

jQuery 접근 방식

처음에는 jQuery를 사용하여 손상된 이미지를 관리하는 것을 고려할 수도 있지만 JavaScript는 더 간단하고 더 효과적인 솔루션. 각 이미지에 대한 onError 이벤트를 처리하면 로드에 실패한 경우 해당 소스를 다시 할당할 수 있습니다.

JavaScript 솔루션

아래 JavaScript 코드 조각은 다음에 대한 onError 이벤트를 캡처합니다. 이미지 요소, src 속성을 업데이트하여 자리 표시자 이미지를 표시합니다(예: "noimage.gif").

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

또는 별도의 JavaScript 함수 없이 보다 간결한 구문을 사용할 수 있습니다:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

호환성

아래 표에는 손상된 오류 처리를 위한 오류 기능을 지원하는 브라우저가 나열되어 있습니다. 이미지:

https://www.quirksmode.org/dom/events/error.html

위 내용은 깨진 이미지를 JavaScript 또는 jQuery로 대체하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!