[javascript] jQuery를 사용하여 이미지를 비동기 적으로로드

Program / 글쓴이

jQuery를 사용하여 비동기 적으로 내 페이지에 외부 이미지를로드하고 싶고 다음을 시도했습니다.

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

   },
   error: function(r,x) {

   }
});

그러나 항상 오류를 반환합니다. 이와 같은 이미지를로드 할 수도 있습니까?

.load방법 을 사용하려고 시도했지만 작동하지만 이미지를 사용할 수없는 경우 시간 초과를 설정하는 방법을 모릅니다 (404). 어떻게해야합니까?

답변

아약스가 필요하지 않습니다. 새 이미지 요소를 작성하고 소스 속성을 설정 한 후로드가 완료되면 문서 어딘가에 배치 할 수 있습니다.

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);
        }
    });

답변

AJAX를 사용해야하는 경우 …

onload 핸들러가 올바른 선택이 아닌 적절한 유스 케이스가있었습니다. 내 경우에는 자바 스크립트를 통해 인쇄 할 때. 따라서 실제로 AJAX 스타일을 사용하는 두 가지 옵션이 있습니다.

해결책 1

Base64 이미지 데이터 및 REST 이미지 서비스를 사용하십시오. 자체 웹 서비스가있는 경우 이미지를 Base64 인코딩으로 제공하는 JSP / PHP REST 스크립트를 추가 할 수 있습니다. 이제 어떻게 유용합니까? 이미지 인코딩에 대한 멋진 새 구문을 발견했습니다.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>

따라서 Ajax를 사용하여 Image Base64 데이터를로드 한 다음 완료되면 Base64 데이터 문자열을 이미지에 빌드합니다! 큰 재미 :). 이미지 인코딩 에이 사이트 http://www.freeformatter.com/base64-encoder.html 을 사용하는 것이 좋습니다 .

$.ajax({
    url : 'BASE64_IMAGE_REST_URL',
    processData : false,
}).always(function(b64data){
    $("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});

해결책 2 :

캐시를 사용하도록 브라우저를 속입니다. 리소스가 브라우저 캐시에있을 때 멋진 fadeIn ()을 제공합니다.

var url = 'IMAGE_URL';
$.ajax({
    url : url,
    cache: true,
    processData : false,
}).always(function(){
    $("#IMAGE_ID").attr("src", url).fadeIn();
});

그러나 두 방법 모두 단점이 있습니다. 첫 번째 방법은 최신 브라우저에서만 작동합니다. 두 번째는 성능 결함이 있으며 캐시 사용 방법에 대한 가정에 의존합니다.

건배, 의지

답변

jQuery를 사용하면 간단히 “src”속성을 “data-src”로 변경할 수 있습니다. 이미지가로드되지 않습니다. 그러나 위치는 태그 와 함께 저장 됩니다 . 내가 좋아하는 것.

<img class="loadlater" data-src="path/to/image.ext"/>

jQuery의 간단한 부분은 data-src를 src에 복사하여 필요할 때 이미지로드를 시작합니다. 제 경우에는 페이지 로딩이 완료되었습니다.

$(document).ready(function(){
    $(".loadlater").each(function(index, element){
        $(element).attr("src", $(element).attr("data-src"));
    });
});

jQuery 코드는 축약 될 수 있지만 내 방식으로는 이해할 수 있습니다.

답변

$(<img />).attr('src','http://somedomain.com/image.jpg');

갤러리가 있고 사진 목록을 반복하는 경우 이미지가 이미 캐시에 있으면 서버에 다른 요청을 보내지 않기 때문에 ajax보다 낫습니다. jQuery / ajax의 경우 요청하고 HTTP 304 (수정되지 않음)를 반환 한 다음 이미 존재하는 경우 캐시에서 원본 이미지를 사용합니다. 위의 방법은 갤러리에서 첫 번째 이미지 루프 후 서버에 대한 빈 요청을 줄입니다.

답변

ASYNC로드에 Deferred 객체를 사용할 수 있습니다.

function load_img_async(source) {
    return $.Deferred (function (task) {
        var image = new Image();
        image.onload = function () {task.resolve(image);}
        image.onerror = function () {task.reject();}
        image.src=source;
    }).promise();
}

$.when(load_img_async(IMAGE_URL)).done(function (image) {
    $(#id).empty().append(image);
});

캐시 문제를 방지하려면 image.sload가 image.src보다 앞에 있어야합니다.

답변

이미지의 소스를 설정하고 싶다면 이것을 사용할 수 있습니다.

$("img").attr('src','http://somedomain.com/image.jpg');

답변

이것도 작동합니다 ..

var image = new Image();
image.src = 'image url';
image.onload = function(e){
  // functionalities on load
}
$("#img-container").append(image);