Присоединение к InnerHtml без остатка содержимого

Question

У меня есть элемент div с некоторыми отформатированными изображениями. По запросу пользователя я загружаю дополнительные изображения асинхронно, без обратной передачи и добавляю результат (форматированный HTML для новых изображений) в элемент div с помощью JavaScript:

function onRequestComplete(result) {
        var images = document.getElementById('images');
        images.InnerHtml += result;
    }

Все в порядке, кроме той части, когда изображения на панели, загруженные ранее, мерцают после добавления HTML. Насколько я понимаю, панель реконструируется, а не только новый HTML-код добавляется к ее нижней части. Так что это не поведение Web 2.0.

Как это можно сделать, не щелкая? Заранее спасибо.

Answer 1

Используйте метод dom для их добавления:

var div = document.createElement('div');
div.innerHTML= result;
document.getElementById('images').appendChild(div);

Или, если вы действительно хотите сделать это правильно, создайте элемент dom для каждого изображения, а затем добавьте их. Это также имеет преимущество предварительной загрузки изображений.

Или просто используйте jQuery. ;)

Answer 2

Использование оператора + = аналогично:

images.innerHTML = images.innerHTML + result;

Который переопределяет весь ваш контейнер, вызывая тем самым "мерцание".

Вы должны иметь тот же результат, добавляя новые элементы в контейнер, без мерцания. Для этого вам понадобятся методы createElement и appendChild.

НТН!

Answer 3

Сделайте все изображения одним изображением, а затем используйте позиционирование CSS, чтобы отобразить нужный раздел.Мерцание происходит из-за загрузки новых изображений.

Answer 4

Когда вы добавляете свой контент, вы можете добавить что-то вроде

<span class='endMarker'></span>

Затем вместо простого обновления «innerHTML» вы просматриваете DOM внутри цели, находите последний <span> с классом «endMarker», а затем добавляете новое содержимое. Не говоря уже о том, чтобы быть «использующим решенную проблему jQuery», я скажу, что подобная библиотека сделает вещи немного проще. Чтобы добавить содержимое, вы можете поместить его в скрытый раздел и затем переместить его.