Question

我正在尝试动态插入一些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定义的高度，宽度和位置）在加载之前闪烁白色，这不是很吸引人。

丑陋的白色闪光是否有补救措施？

请注意！我尝试切换对象的visibility属性并启动一个加载器div，但我无法确定哪个事件可以调用加载器并在对象完全注入DOM时重新打开可见性。最后我决定暂停1秒钟，这感觉不到最佳状态。

Answer 1

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

动态注入<object>标记会导致白色闪烁</object>

1 个答案: