动态注入 <object> 标签会导致白闪答案

【问题标题】：Dynamically injecting an <object> tag causes white flash动态注入 <object> 标签会导致白闪
【发布时间】：2023-03-12 04:51:02
【问题描述】：

我正在尝试在命令中动态插入一些 HTML/JS/CSS。（保持关闭此代码以提高页面加载速度）。我找到了一个巧妙的方法为此，插入一个指向 html- 的 HTML5 标记文件依次引用 css 和 js，如下所示：

function toggleObject() { 
var object = document.getElementById('myObject'); 
  if (!object) { 
    var e = document.createElement('object'); 
    e.setAttribute('data', 'testing.html'); 
    e.setAttribute('id', 'myObject'); 
    // inject data into DOM 
    document.getElementsByTagName('body')[0].appendChild(e); 
 } else { 

    document.getElementsByTagName('body')[0].removeChild(object); 
}}

唯一的问题是，在插入标签时，对象（由 css 定义的高度、宽度和位置）在加载之前会闪烁白色，这不是很吸引人。

难看的白闪有补救办法吗？

注意！我尝试切换对象的可见性属性并启动加载程序 div，但我不知道当对象完全注入 DOM 时，什么事件能够取消加载程序并重新打开可见性。最后我只设置了 1 秒的超时时间，感觉不太理想..

【问题讨论】：

你试过了吗：code.google.com/p/swfobject
真的吗？ Flash Player 嵌入插件？我不太明白这有什么帮助。而且我宁愿不使用任何插件..
曾经想过：也许有些人以前遇到过这个问题并修复了它，并编写了一些代码并发布了它供其他人使用，免费的。顺便说一句 - 它不是一个插件，它是一个 JavaScript 库。
好吧，也许我读得还不够远。谢谢。使用图书馆似乎还是有点矫枉过正（是的，它很小，但我的移动网络应用程序也是如此）
@Diodeus SWFObject 根本无法帮助您解决这个问题。这是一个用于嵌入 Flash 播放器的跨浏览器库。

标签： javascript html dom code-injection object-tag

【解决方案1】：

尝试在创建OBJECT Element 时将可见性 设置为隐藏，然后将其设置为可见附加到其父 Node。

【讨论】：

是否有一个事件或什么我可以在它完全加载后将其设置为可见？
你可以在OBJECTElements上注册一个load EventListener；然而，这可能不可靠。您正在使用 OBJECT 加载哪种数据源（例如 Flash 播放器）？
我可能会试一试。我正在加载一个 html 文件。
不，是一样的。这不是一个坏主意，我会研究一下。谢谢。您认为有什么好处？
这是跨域的吗？如果没有，您可以轻松使用 XHR (XMLHttpRequest)。