Javascript 插入DOM时图像闪烁

我注意到，当我这样做时（使用jQuery，但我认为这无关紧要）：

$（“#myDiv”）.html（“这是我的图像”）；

浏览器首先显示文本，然后加载图像，并将文本向右移动，从而产生可怕的闪烁效果

---

该图像似乎未被浏览器缓存。知道为什么吗？如何在将图像加载到DOM时避免这种现象？

如何在将图像加载到DOM时避免这种现象？

有两种主要方法（可能更多：）

1） 设置img的实际大小

或通过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');

var img=newimage（）；
$（img）.load（函数（）{
$（“#myDiv”）。追加（$（此））
.append（document.createTextNode（“这是我的图像”）；
//或者按照您的方式，浏览器应该从缓存中获取图像
$（“#myDiv”）.append（“这是我的图像”）；
}).attr（'src'，'/image.png'）；

---

ps：引擎中有一个严重的包，所以引擎代码格式不想与编号列表结合。因此我删除了列表。

即使缓存，图像也可能会使文本呈现得稍慢一些。如果您知道图像的尺寸，请将

高度和
宽度属性添加到图像中，这样图像就不会显示mparound.
在附加图像之前，先预加载图像：

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

$（“像这样预加载图像

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

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

var图像=[
“/path/to/some/image1.png”，
“/path/to/some/image2.png”
];
$（图像）。每个（函数（）{
var image=$（'谢谢你的回答。你如何预加载图像并确保我的动态HTML引用预加载的图像？我需要.append（）将其与文本分开吗？@Blacksad
我需要.append（）吗它与文本分开
一般来说-不，我只是想让它变得…时尚，同时尝试打开格式设置）闪烁效果？你能解释或演示一下吗？我在演示中没有看到闪烁：@cimevidas闪烁可能出现在连接速度慢和大图像文件中。
var images = [
'/path/to/some/image1.png',
'/path/to/some/image2.png'
 ];

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