Javascript更改innerhtml导致闪烁

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

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

来源

2014-02-25 B_s

jsfiddle会有帮助 – turnt

您是否尝试了不同的浏览器？ – frhd

您可以编辑现有的元素的“src”属性，这可能会诀窍。 –

页面闪烁，因为您在带有src设置的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

来源

2014-02-25 21:09:58 longchiwen

设置onload处理程序在设置'.src'之后，在IE中会出现问题。如果图像已被缓存，则可能会错过onload事件。 – jfriend00

@ jfriend00你是对的。我更新了我的回答 – longchiwen

预加载技术使图像立即出现，但由于整个img标签被替换为另一个'闪烁'仍然出现。现在已经修复，请参阅我的修改。尽管感谢您详细说明信息，但它有助于我更好地理解问题！ –

有一件事可以帮助Chrome至少在Firefox中保存你的jpeg，并且它们渲染速度更快，可能会减少闪烁。

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

另一个是修改代码，以便而不是取代的innerHTML，您可以隐藏/取消隐藏一个div内的图像。

希望这会有所帮助。

来源

2014-02-25 20:54:05 archie

扩大我的评论到一个答案......

为了防止闪烁变化的图像时，你需要做的＃1件事就是确保浏览器从来都不是处于不知道图像的高度和宽度的状态。如果您还想阻止其显示新图像所在的空白空间，则还需要确保图像在放入页面之前已经预先缓存。最简单的解决方法是，可能只是确保您提供的任何图像标签都具有与图像大小相匹配的高度和宽度属性，并且无论何时替换该图像标签，它的高度和宽度都与您所使用的相同更换。这应该防止闪烁。对于干净的初始显示和更换的形象，你可以做以下所有：

确保您的图像标签既具有高度和宽度属性，以确保浏览器知道到底有多少空间预留该图像甚至在浏览器加载该图像之前。如果您不这样做，那么浏览器在图像至少部分下载之前不会知道图像大小，它必须分配一些初始空间，然后在下载图像时调整到最终尺寸。这可能会导致闪烁，因为页面会放置到一组尺寸，然后必须重新调整为最终尺寸。如果指定了高度和宽度属性，则不会发生这种尺寸变化。
与其替换整个图片标签，您通常只需更改现有图片标签的.src属性即可，只需指定一个新的图片网址即可。
如果您希望在没有时间的情况下立即显示图像，而浏览器尚未显示图像位，则可以预缓存图像。这些以前的答案中提供了图像缓存代码：here,here,here和here。

来源

2014-02-25 21:54:02 jfriend00

Javascript更改innerhtml导致闪烁

回答

相关问题