Javascript更改innerhtml导致闪烁

我使用javascript每隔5秒用另一个图像更改一个div的内容。它只需选择一个随机图像，然后使用.innerHTML将div的内容更改为正确的标记。但是，当它加载脚本时，图像会改变，但整个页面很快就会闪烁一点。是使用.innerHTML造成的吗？如果是这样，我如何使用javascript更改div中的图像？ 谢谢

---

编辑：您的多个建议被当场发现：缺少一个高度，而且每次都会插入一个新的img。我用

display:inline

修复了它，并将

imgsrc

改为

.innerHTML

。再次感谢大家

至少在Chrome和Firefox中，有一件事会有所帮助，那就是使用渐进扫描保存JPEG，这样可以更快地渲染，可能会减少闪烁

另一种方法是修改代码，这样就可以在div中隐藏/取消隐藏图像，而不是替换innerHTML

---

希望这有帮助。

页面会闪烁，因为您使用src set在DOM中插入了新的img标记。这会导致到服务器的往返过程加载映像

您可以通过预加载新映像来消除闪烁（当从服务器检索新映像时，您可以显示加载程序）

比如：

var imageUrl = "newimage.jpg";
var imageElement = $("img");
var img = new Image();


// show loader here

img.onload = function(){
    imageElement.attr("src",imageUrl); // this will actualy show preloaded image

    // hide loader here
};
img.onerror = function(){
    // som-ting-wong came along

    // hide loader here
};
img.src = imageUrl ; // this will start image preloading

---

将我的评论扩展为答案

为了防止更改图像时出现闪烁，您需要做的第一件事是确保浏览器永远不会处于不知道图像高度和宽度的状态。如果您还希望防止它在新图像所在的位置显示空白，那么您还需要确保在将图像放入页面之前，该图像已经预缓存。最简单的修复方法可能是确保您提供的任何图像标记上都有一个与图像大小匹配的高度和宽度属性，并且每当您替换该图像标记时，它的高度和宽度都与您要替换的图像标记相同。这将防止任何闪烁。要获得最干净的初始显示和图像替换，可以执行以下所有操作：

确保图像标记同时具有“高度”和“宽度”属性，以确保即使在浏览器加载图像之前，浏览器也能准确地知道要为图像保留多少空间。如果不这样做，则浏览器在图像至少部分下载之前不知道图像大小，并且必须分配一些初始空间，然后在下载图像时调整到最终尺寸。这可能会导致页面在布局为一组尺寸时闪烁，然后必须重新调整为最终尺寸。如果指定了“高度”和“宽度”属性，则不会发生此大小更改

通常，您可以通过为现有图像标记分配一个新的图像URL来更改其

.src

属性，而不是替换整个图像标记

如果您希望在浏览器没有图像位显示的情况下立即显示图像，则可以预先设置图像。前面的回答中提供了图像缓存代码：、和

---

JSFIDLE会很有用。您是否尝试过不同的浏览器？您可以编辑现有元素的“src”属性，这可能会奏效。我的猜测是，如果

标记没有高度和宽度属性，那么浏览器有很短的时间（在加载新图像之前）它不知道图像有多大，这可能会导致一些重新播放的扰动。如果图像都是已知高度和宽度的，那么指定这些属性可以修复它。或者，您可以预加载图像，以便它们都已缓存。如果您展示您的实际代码，我们也可以提供代码建议。@D.Kasipovic这是一个解决方案，我最终与

display:inline一起使用。谢谢。在IE中设置
.src
后设置onload处理程序是一个问题。如果图像已缓存，则可能会错过onload事件。预加载可以立即显示图像，但由于整个img标记已替换为另一个，因此仍然会出现“闪烁”。现在已修复，请参见我的编辑。谢谢你详细的信息，它帮助我更好地理解这个问题@jfriend00请看我上面的评论，我会解释的。我对img标签的src的评论投了赞成票。对不起，如果我没有正确使用投票和答疑系统，我还是个新手。还感谢您的评论，以及选择的答案，它帮助我理解了这个问题。