jQuery를 사용하여 이미지를 비동기적으로 로드할 수 있나요?

jQuery를 사용한 비동기 이미지 로드

질문:

외부 이미지를 비동기적으로 로드하려고 합니다. 다음과 함께 jQuery를 사용 코드:

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

오류 응답이 발생합니다. jQuery로 비동기 이미지 로딩이 가능합니까? 그렇지 않다면 어떻게 이미지를 비동기식으로 로드할 수 있습니까?

해결책:

jQuery를 사용하면 실제로 비동기식 이미지 로드가 가능합니다. 그러나 $.ajax() 메서드는 이 작업에 적합하지 않습니다. 대신에 선호되는 접근 방식은 새 이미지 요소를 동적으로 생성하고 여기에 이벤트 핸들러를 연결하는 것입니다.

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#something").append(img);
        }
    });

이 방법은 기본 HTML5 이미지 로딩 메커니즘을 사용하여 이미지가 완전히 완료되면 로드 이벤트를 트리거합니다. 짐을 실은. 전체, naturalWidth 및 naturalHeight 속성을 확인하면 이미지가 성공적으로 로드되었는지 확인하고 이미지 깨짐 경고를 방지할 수 있습니다.

위 내용은 jQuery를 사용하여 이미지를 비동기적으로 로드할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!