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

在附加图像之前预加载图像：

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

Answer 3

像这样预加载你的图片

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

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

Answer 4

图像可能会使文本慢一点，即使缓存也是如此。如果您知道图片的尺寸将height和width属性添加到图片，那么它就不会跳转。

插入DOM时图像闪烁

4 个答案: