动态注入一个<对象>标签导致白色闪光

发布于 2024-12-25 11:41:17 字数 735 浏览 1 评论 0原文

我正在尝试根据命令动态插入一些 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 秒的超时,这感觉不太理想。

I'm trying to dynamically insert some HTML/JS/CSS on command. (holding
off this code for page loading speed). I found a neat way
of doing this, inserting a HTML5 tag pointing at the html-
file which in turn references the css and js, like so:

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); 
}} 

The only problem with this is that upon inserting the tag the object (height, width and position as defined by css) flashes white before loading which isn't very attractive.

Is there a remedy for the ugly white flash?

Note! I experimented with toggling the visibility property of the object and firing up a loader div, but I can't figure what event would be able to call off the loader and turn visibility back on when the object is fully injected in the DOM. In end I settled for just a timeout of 1 sec, which feels less than optimal..

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

焚却相思 2025-01-01 11:41:17

创建 OBJECT Element 时,尝试将可见性设置为隐藏,然后将其设置为可见< /em> 一旦它被附加到其父节点Node

Try setting the visibility to hidden when you create the OBJECT Element and then setting it to visible once it has been appended to its parent Node.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文