JavaScript를 사용하여 서버에 이미지가 있는지 확인하는 방법은 무엇입니까?

JavaScript를 사용하여 서버에 이미지 존재를 확인하는 방법

서버에 리소스가 존재하는지 확인하는 것은 다음과 같은 많은 웹 애플리케이션에서 매우 중요합니다. 동적으로 이미지를 로딩합니다. JavaScript를 사용하여 이 작업을 수행하는 방법을 살펴보겠습니다.

문제:

HTML 페이지에 여러 이미지(예: 1.jpg ~ 5.jpg)가 삽입되어 있고 서버에 추가 이미지(예: 6.jpg)가 있는지 주기적으로 확인하고 싶습니다. 이를 달성하려면 매분 JavaScript 함수를 호출하여 다음 검사를 수행해야 합니다.

if "../imgs/6.jpg" exists:
    var nImg = document.createElement("img6");
    nImg.src = "../imgs/6.jpg";

해결책:

이미지가 서버에서 다음 JavaScript 코드를 활용할 수 있습니다.

function imageExists(image_url){

    var http = new XMLHttpRequest();

    http.open('HEAD', image_url, false);
    http.send();

    return http.status != 404;

}

설명:

이 코드 조각은 XMLHttpRequest 개체를 사용하여 지정된 이미지에 HTTP HEAD 요청을 보냅니다. URL. HEAD 요청은 리소스와 관련된 HTTP 상태 코드를 반환하여 리소스가 존재하는지 여부를 나타냅니다. 200 또는 304 상태 코드는 리소스가 존재함을 나타내고, 404 상태 코드는 리소스가 없음을 나타냅니다.

또는 jQuery 구현을 사용할 수도 있습니다.

$.get(image_url)
    .done(function() { 
        // Do something now you know the image exists.

    }).fail(function() { 
        // Image doesn't exist - do something else.

    })

이 jQuery 접근 방식은 또한 HTTP GET 요청을 수행하고 서버의 응답을 기반으로 지정된 콜백을 실행합니다.

위 내용은 JavaScript를 사용하여 서버에 이미지가 있는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!