Question

我使用javascript每5秒用另一个图像更改div的内容。它只是选择一个随机图像，然后使用.innerHTML将div的内容更改为正确的标记。但是，当它加载脚本时，图像会被更改，但整个页面会很快闪烁。使用.innerHTML会导致这种情况吗？如果是这样，我怎么能用javascript更改div中的图像？谢谢！

编辑：你发现了多个建议：缺少高度，每次都会插入一个新的img。我用display:inline修正了它，并更改了img src而不是.innerHTML。再次感谢大家！

Answer 1

将我的评论扩展为答案......

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

确保您的图片代码具有高度和宽度属性，以确保浏览器确切地知道在浏览器加载该图像之前为图像预留了多少空间。如果不这样做，则浏览器在图像至少部分下载之前不知道图像大小，并且必须分配一些初始空间，然后在下载图像时调整到最终尺寸。当页面放置到一组尺寸时，这可能导致闪烁，然后必须重新调整到最终尺寸。如果指定了height和width属性，则不会发生此大小更改。
您可以通过仅为其分配新的图片网址来更改现有图片代码的.src属性，而不是替换整个图片代码。
如果您希望图像能够立即显示，而浏览器还没有显示图像位，那么您可以预先处理图像。以前的答案中提供了图片缓存代码：here，here，here和here。

Answer 2

页面闪烁，因为您在DOM中设置了新的img标记并设置了src。这导致往返服务器以加载图像。

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

类似的东西：

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

Answer 3

有一点可以帮助Chrome＆amp; Firefox至少会用逐行扫描来保存你的jpegs，它们会渲染得更快，可能会减少闪烁。

http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

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

希望这有帮助。

Javascript更改innerhtml导致闪烁

3 个答案: