Почему Элемент.scrollTop не прокручивает блок если в нем есть картинки?

Question

[Богдан Кучерук]

Есть блок #div в который добавляются другие блоки через AJAX:

<div id="div"></div>
 $("#div").append('<div class="divme">'+aj+'</div>');

После каждого добавления скролю блок в конец:

var block = document.getElementById("div");
      block.scrollTop = 9999;

При добавлении только текста прокрутка работает:


Почему когда я пробую добавить в блок картинки:

$("#div").append('<div class="divme"><img style="width:100%;height:100%;margin-left:0px;border-bottom:1px solid #dbdbdb;" src="http://buybuy/uploads2/'+fileName+'"></div>');
                       var block2 = document.getElementById("div");
                          block2.scrollTop = 9999;

Прокрутка работает некорректно:


Почему так происходит и как это исправить?

Comments

[garbagecollected]

слишком мало данных для выяснения вашей проблемы. scrollTop работает, наличие картинок в блоке не играет роли

[Богдан Кучерук]

garbagecollected, извините, добавил больше данных

[garbagecollected]

Богдан Кучерук, Видимо, у вас в верстке проблема. Картинка не успевает прогрузиться. Вы можете прослушивать событие картинки onload или добавить setTimeout

[Богдан Кучерук]

garbagecollected, сайт на опен сервере, картинка с ПК и добавляется в блок после успешной загрузки на оффлайн сервер.

$.ajax({
                  url: 'upload.php',
                  dataType: 'text',
                  cache: false,
                  contentType: false,
                  processData: false,
                  data: form_data,
                  type: 'post',
                  success: function Addimg(){
                       $("#div").append('<div class="divme"><img style="width:100%;height:100%;margin-left:0px;border-bottom:1px solid #dbdbdb;" src="http://buybuy/uploads2/'+fileName+'"></div>');
                       var block2 = document.getElementById("div");
                          block2.scrollTop = 9999;
                    }
       });

Добавил функцию с setTimeout после добавления картинки и всё работает. Спасибо большое!

[garbagecollected]

Богдан Кучерук,
Картинка должна загрузиться с сервера в браузер.
Начинает загружаться только после добавления тега.
При быстром интернете небольшой setTimeout решит проблему.
Чтобы это же решение работало на медленном интернете,
стабильнее прослушивать событие onload у добавленного тега <img>.
Но правильно было бы сверстать так, чтобы это явление не нужно было ждать,
чтобы блок имел нужную высоту независимо от того, загрузилась ли картинка.