Блог

У меня есть эта функция для вставки большего количества сообщений с изображениями на мою веб-страницу. После вставки изображений div, внутри которого находится изображение, изменяется на ту же ширину, что и изображение. Однако проблема, с которой я сталкиваюсь, заключается в том, что она запускается до загрузки изображений, поэтому размеры divs не изменяются.

Есть идеи, как я могу настроить ее на запуск при загрузке всех изображений?

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

Вы можете использовать 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);
    });
  }
});
  

В дополнение к тому, что упомянул Гуффа, я мог бы даже переместить не зависящую от данных часть вашего кода в .ajax complete обратный вызов:

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

Существует событие onload для тегов img, которое запускается при загрузке изображения. Вы пробовали это

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

вам также необходимо проверить атрибут complete и запустить событие load, если оно true

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