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

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

---

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 (수정되지 않음)를 반환 한 다음 이미 존재하는 경우 캐시에서 원본 이미지를 사용합니다. 위의 방법은 갤러리에서 첫 번째 이미지 루프 후 서버에 대한 빈 요청을 줄입니다.

---

You can use a Deferred objects for ASYNC loading.

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

Please pay attention: image.onload must be before image.src to prevent problems with cache.

---

If you just want to set the source of the image you can use this.

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

---

This works too ..

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

---

AFAIK you would have to do a .load() function here as apposed to the .ajax(), but you could use jQuery setTimeout to keep it live (ish)

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

---

use .load to load your image. to test if you get an error ( let's say 404 ) you can do the following:

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

careful - .error() event will not trigger when the src attribute is empty for an image.

---

$(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