动态注入一个<对象>标签导致白色闪光对象>
我正在尝试根据命令动态插入一些 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
创建
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 parentNode
.