html导致桌面闪烁,Javascript更改innerhtml导致闪烁

我使用javascript每隔5秒更改div的内容与另一个图像.它只是选择一个随机图像,然后使用.innerHTML将div的内容更改为正确的标签.但是,当它加载脚本时,图像会更改,但是整个页面很快就会闪烁一下.是使用.innerHTML导致的？如果是这样,如何使用javascript更改div中的图像？

谢谢！

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

解决方法:

页面闪烁是因为您在设置了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

标签：image,innerhtml,css,html,javascript

来源： https://codeday.me/bug/20191029/1963097.html