Изображение мерцает при вставке в DOM

Question

Я заметил, что когда я делаю что-то подобное (с jQuery, но я не думаю, что это имеет значение):

$("#myDiv").html("<img src='/image.png'/> this is my image.");

Браузер сначала отображает текст, а затем изображение загружаетсясмещает текст вправо, что создает ужасный эффект мерцания.

Похоже, что изображение не кэшируется браузером.Есть идеи почему?Как я могу избежать этого явления при загрузке изображений в DOM?

Answer 1

How can I avoid this phenomena when loading images into the DOM ? Есть два основных метода (может быть больше:))

1) Установите фактический размер img <img with='20' height='20' src='...' /> или в стиле CSS.

2) Используйте предварительную загрузку изображения и вставляйте код только при загрузке изображения

var img = new Image(); 
$(img).load(function(){  
    $("#myDiv").append($(this))
               .append(document.createTextNode("this is my image.");
    // or your way, browser should take image from cache
    $("#myDiv").append("<img src='/image.png'/> this is my image.");     
 }).attr('src', '/image.png');

ps: в движке SO есть серьезная проблема - форматирование кода не нужно сочетать с нумерованным списком. Поэтому я удалил список.

Answer 2

предварительно загрузить ваши изображения, как это

var images = [
'/path/to/some/image1.png',
'/path/to/some/image2.png'
 ];

$(images).each(function() {
var image = $('<img />').attr('src', this);
});

Answer 3

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

$("<img>", {
    load: function() {
        $("#myDiv").empty().append( this, "this is my image." );
    },
    src: "/image.png"
});

Answer 4

Изображения могут отображаться немного медленнее, чем текст, даже если они кэшированы.Если вы знаете размеры изображения , добавьте height и width атрибуты к изображению и тогда оно не будет прыгать.