jquery append 후 함수 실행

Question

내 웹 페이지에 더 많은 이미지 포스트를 삽입 할 수있는이 함수가 있습니다. 이미지를 삽입 한 후에 이미지가있는 div의 크기가 이미지와 동일한 너비로 조정됩니다. 그러나 내가 겪고있는 문제는 div가 크기가 조정되지 않도록 이미지가로드되기 전에 실행되고 있다는 것입니다.

모든 이미지가로드 될 때 어떻게 실행하도록 설정할 수 있습니까?

function load_more(url, page, page_name) { 
    $.ajax({ 
     type: 'POST', 
     url: "/app/load_more/" + page_name + "/pagename/" + url, 
     data: 'id=testdata', 
     dataType: 'json', 
     cache: false, 
     success: function (data) { 
      $(".next").remove(); 
      $("#top").append(data['top']); 
      $("#bottom").append(data['bottom']); 
      $('.img-wrap').each(function() { 
       if ($(this).find('img').attr('src') != "") { 
        $(this).animate({ 
         width: $(this).find('img').css("width") 
        }, 300); 
       } 
      }); 
     } 
    }); 
} 

Answer 1

당신은 그들을로드 될 때까지 기다려야 이미지에 load 이벤트를 사용할 수에 해당하는 경우로드 이벤트를 트리거 할 필요가 시도 되세요 :

$('.img-wrap').each(function() { 
    var div = $(this); 
    var img = div.find('img'); 
    if (img.attr('src') != ""){ 
    img.on('load', function(){ 
     div.animate({ 
     width: img.css("width") 
     }, 300); 
    }); 
    } 
}); 

Answer 2

img 태그에는 이미지가로드 될 때 실행되는 onload 이벤트가 있습니다. 이

$(document).on('load', 'img', function(){ 
// resize 
}); 

당신은 또한 전체 속성을 확인하고

var $img = $(this).find('img'); 
if ($(this).find('img').attr('src') != "" && $img.get(0).complete){ 
    $img.trigger('load); 
} 

Answer 3

Guffa 언급 한 것에 더하여, 나는 심지어 아약스 완전한 콜백에 코드의 비 데이터에 의존하는 부분을 이동할 수 있습니다

function load_more(url, page, page_name) { 
    $.ajax({ 
     type: 'POST', 
     url: "/app/load_more/" + page_name + "/pagename/" + url, 
     data: 'id=testdata', 
     dataType: 'json', 
     cache: false, 
     success: function (data) { 
      $(".next").remove(); 
      $("#top").append(data['top']); 
      $("#bottom").append(data['bottom']); 
     }, 
     complete: function() { 
      $('.img-wrap').each(function() { 
       var div = $(this); 
       var img = div.find('img'); 
       if (img.attr('src') != "") { 
        img.load(function() { 
         div.animate({ 
          width: img.css("width") 
         }, 300); 
        }); 
       } 
      }); 
     } 
    }); 
}