JQuery를 사용하여 이미지 미리로드

Question

저는 꽤 오래 동안 검색을했기 때문에 jquery ajax 호출에서 가져 오는 이미지를 미리로드하는 작업을 찾을 수 없습니다.

.ajax 호출은 "~ 1_ ~ 2_ etc"와 같은 응답을 생성합니다.

$(".showPixFeature.hidden").live('click', function() { 
     var adID = this.id.split('_'); 
     $("#" + adID[0] + '_' + adID[1]).hide(); 
     $.ajax({ 
     type: "POST", 
     url: "../classifieds/classAdPics.php", 
     data: "ID="+ this.id, 
     success: function(r){ 
      var images = r.split('~'); 
      var thumbs = ''; 
       var i=0; 
       if(((images.length) - 1) > 1){ 
       for (i=1;i<=(images.length) - 1;i++) 
       { 
       thumbs = thumbs + '<img src="../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg" id="' + adID[1] + '_' + images[i] + '" class="thumbNails">'; 
       } 
       } 
       thumbs = thumbs + '<div><img src="../images/listings/' + adID[1] + '_1_.jpg" id="' + adID[1] + '_Preview" class="thumbNails"></div>'; 
      $("#" + adID[0] + '_' + adID[1]).html(thumbs).slideDown(); 
      } 
     }); 
    $(this).attr("src", "../images/close_pix.png"); 
    $(this).removeClass('hidden').addClass('shown'); 
    }); 
    $(".showPixFeature.shown").live('click', function() { 
     var adID = this.id.split('_'); 
     $("#" + adID[0] + '_' + adID[1]).slideUp(); 
     $(this).attr("src", "../images/class_see_more.png"); 
     $(this).removeClass('shown').addClass('hidden'); 
    }); 
    $(".thumbNails").live('click', function() { 
     var adID = this.id.split('_'); 
     $('#' + adID[0] + '_Preview').hide().attr('src', '../images/listings/' + this.id + '_.jpg').fadeIn('500'); 
    }); 

.slideup() 호출 전에 호출되는 이미지를 미리로드하고 싶습니다.

미리 감사드립니다.

Answer 1

이미지를 load까지 기다리려면 .load를 사용하여 처리기를 이미지에 바인딩하십시오. 다음과 같은 것 :

$ ('# myImage'). (이미지가 완료되면 로딩됩니다. ); (function() { );