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

깨진 이미지를 jQuery로 교체

웹 페이지에 깨진 이미지가 표시되면 사용자는 실망스러울 수 있습니다. 다행스럽게도 JavaScript는 이 문제를 처리할 수 있는 다양한 방법을 제공합니다.

한 가지 접근 방식은 jQuery의 필터링 기능을 활용하여 깨진 이미지를 식별하고 교체하는 것입니다. 이렇게 하려면:

1. jQuery의 $("img") 선택기를 사용하여 페이지의 모든 이미지를 가져옵니다.
2. .error() 함수를 사용하여 이미지 세트를 필터링하여 손상된 부분을 식별합니다.
3. 깨진 각 이미지에 대해 src 속성을 기본 "이미지 없음"과 같은 원하는 대체 이미지로 바꿉니다. 자리 표시자.

그러나 단순성을 위해 순수 JavaScript를 사용하여 손상된 이미지를 처리하는 것이 더 쉬운 경우가 많습니다.

JavaScript 솔루션:

onError 이벤트는 이미지가 실패할 때 소스 속성을 재할당하는 데 사용될 수 있습니다. load:

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

HTML에서 이 함수를 구현합니다:

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

또는 onError 이벤트는 함수 없이 HTML에서 직접 처리할 수 있습니다:

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

오류에 따른 브라우저 호환성은 다음 표를 참조하세요. 시설:

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

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