插入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引擎中有一个严重的包 - 代码格式化不希望与编号列表结合.所以我删除了列表.