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

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

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

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

   },
   error: function(r,x) {

   }
});

하지만 항상 에러가 반환되는데, 이런 식으로 이미지를 로드할 수 있나요?

method를 사용하려고 했는데, 사용할 수 없는 화상을 타임아웃으로 설정하는 방법을 모르겠습니다(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);
        }
    });

에이잭스를 꼭 써야 한다면...

로드 핸들러가 적절하지 않은 사용 사례를 접하게 되었습니다.저 같은 경우에는 javascript로 인쇄할 때.이를 위해 실제로 AJAX 스타일을 사용하는 옵션은 두 가지가 있습니다.

솔루션 1

Base64 이미지 데이터와 REST 이미지 서비스를 사용합니다.독자적인 Web 서비스가 있는 경우는, 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의 Simple 부분은 data-src를 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');

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

비동기 로드에는 지연 개체를 사용할 수 있습니다.

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.onload는 이미지 앞에 있어야 합니다.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);

AFAIK에서는 .ajax()에 해당하는 .load() 함수를 실행해야 하지만 jQuery setTimeout을 사용하여 라이브(약)를 유지할 수 있습니다.

<script>
 $(document).ready(function() {
 $.ajaxSetup({
    cache: false
});
 $("#placeholder").load("PATH TO IMAGE");
   var refreshId = setInterval(function() {
      $("#placeholder").load("PATH TO IMAGE");
   }, 500);
});
</script>

.load를 사용하여 이미지를 로드합니다.에러가 발생했을 경우(404 등)를 테스트하려면 , 다음의 조작을 실시합니다.

$("#img_id").error(function(){
  //$(this).hide();
  //alert("img not loaded");
  //some action you whant here
});

care - 이미지의 src 속성이 비어 있는 경우 .error() 이벤트는 트리거되지 않습니다.

//Puedes optar por esta solución:

var img = document.createElement('img');
img.setAttribute('src', element.source)
img.addEventListener('load', function(){
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                            alert('broken image!');
                        } else {
                        $("#imagenesHub").append(img);
                        }
                    });

$(function () {
       
        if ($('#hdnFromGLMS')[0].value == 'MB9262') {
            $('.clr').append('<img src="~/Images/CDAB_london.jpg">');
        }
        else
        {
            $('.clr').css("display", "none");
            $('#imgIreland').css("display", "block");
            $('.clrIrland').append('<img src="~/Images/Ireland-v1.jpg">');
        }
    });

언급URL : https://stackoverflow.com/questions/4285042/asynchronously-load-images-with-jquery