[JQUERY] jQuery로 비동기 이미지로드

jQuery로 비동기 이미지로드

해결법

1. ---

   1.아약스에 대한 필요가 없습니다. 이 완성 된로드가되면 당신은 새로운 이미지 요소를 만들 수 있습니다, 문서에 어딘가에 소스 속성과 장소를 설정합니다

   아약스에 대한 필요가 없습니다. 이 완성 된로드가되면 당신은 새로운 이미지 요소를 만들 수 있습니다, 문서에 어딘가에 소스 속성과 장소를 설정합니다

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

2. ---

   2.당신은 정말 TO USE AJAX 필요하면 ...

   당신은 정말 TO USE AJAX 필요하면 ...

   나는 온로드 핸들러가 올바른 선택되지 않은 사용 사례를 가로 질러왔다. 내 경우에는 자바 스크립트를 통해 인쇄 할 때. 그래서 이것에 대한 AJAX 스타일을 사용하는 두 가지 사실이 있습니다 :

   해결 방법 1

   사용 Base64로 이미지 데이터와 REST 이미지 서비스를 제공합니다. 당신이 당신의 자신의 웹 서비스가있는 경우, 당신은 JSP / PHP REST 스크립트를 추가 할 수 Base64 인코딩에서 제공하는 이미지. 이제 어떻게 유용합니다? 나는 영상 부호화를위한 새로운 멋진 구문 건너 온 :

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

   당신이 다음 완료에 Ajax를 사용하여 이미지 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);
   });
   

   Solution2 :

   캐시를 사용하는 브라우저 트릭. 자원이 브라우저 캐시에있을 때 당신에게 좋은 fadeIn ()를 제공합니다 :

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

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

   건배, 의지

3. ---

   3.jQuery를 사용하면 간단하게 "데이터 SRC"에 "SRC"속성을 변경할 수 있습니다. 이미지가로드되지 않습니다. 그러나 위치가 태그로 저장됩니다. 어떤 내가 좋아하는.

   jQuery를 사용하면 간단하게 "데이터 SRC"에 "SRC"속성을 변경할 수 있습니다. 이미지가로드되지 않습니다. 그러나 위치가 태그로 저장됩니다. 어떤 내가 좋아하는.

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

   당신이 그것을 필요로 할 때 이미지를로드가 시작됩니다 SRC에 jQuery를 데이터를 복사-SRC의 간단한 조각. 내 경우에는 페이지가 완성로드가있을 때.

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

   내가 jQuery 코드는 생략 될 수있다 내기,하지만이 방법으로 이해할 수있다.

4. ---

   4.

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

   이미지가 캐시에 이미있는 경우 자사의 갤러리와 당신이 사진의 목록을 통해 반복되기 때문에 경우에 더 나은 아약스보다 경우,이 서버에 다른 요청을 보내 실 거예요. 그것은 jQuery를 / 아약스의 경우 요청하고 HTTP 304 (안 수정)을 반환하고 경우는 이미 캐시에서 원본 이미지를 사용합니다. 상기 방법은 이미지 갤러리의 제 1 루프 후 서버에 빈 요구를 감소시킨다.

5. ---

   5.당신은 ASYNC 로딩에 대한 이연 개체를 사용할 수 있습니다.

   당신은 ASYNC 로딩에 대한 이연 개체를 사용할 수 있습니다.

   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.src 캐시 문제를 방지하기 전에 image.onload이 있어야합니다.

6. ---

   6.그냥 이미지의 소스를 설정하려면이 사용할 수 있습니다.

   그냥 이미지의 소스를 설정하려면이 사용할 수 있습니다.

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

7. ---

   7.이 작품도 ..

   이 작품도 ..

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

8. ---

   8.(틱) AFAIK 당신은 아약스 ()에 반대 여기) 함수를 .load을 (해야 할 것입니다,하지만 당신은 그것을 사는 유지하기 위해 jQuery를의 setTimeout을 사용할 수 있습니다

   (틱) AFAIK 당신은 아약스 ()에 반대 여기) 함수를 .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>
   

9. ---

   9.사용하여 이미지를로드 .load. 오류가 발생하면 테스트는 다음을 수행 할 수 있습니다 (의 404을 가정 해 봅시다)

   사용하여 이미지를로드 .load. 오류가 발생하면 테스트는 다음을 수행 할 수 있습니다 (의 404을 가정 해 봅시다)

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

   주의 - src 속성은 이미지에 대한 비어있는 경우에는 .error () 이벤트가 실행되지 않습니다.

10. ---

    10.() {(기능 $

    () {(기능 $

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

from https://stackoverflow.com/questions/4285042/asynchronously-load-images-with-jquery by cc-by-sa and MIT license