Jquery flash of unstyled content (IE and Chrome) [重复]答案

【问题标题】：Jquery flash of unstyled content (IE and Chrome) [duplicate]Jquery flash of unstyled content (IE and Chrome) [重复]
【发布时间】：2012-01-04 21:16:16
【问题描述】：

可能重复：
Cross-browser window resize event - JavaScript / jQuery
Jquery flash of unstyled content (IE only)

我有一个 div (#container)，在点击事件中我换出一张图片并将其替换为 YouTube 视频：

$("#feature_content").click(function(){
                var iframe = "<iframe />";

                var url = "http://www.youtube.com/embedlink";

                 $(iframe, {
                    name: 'videoframe',
                    id: 'videoframe',
                    src: url,
                    width: '600',
                    height: '335',
                    frameborder: 0,
                    allowfullscreen: true
                }).appendTo(this);

                $(this).find('img').fadeOut(function() { $(this).remove();});

    });

但是，在视频开始播放之前，我在 div 下方看到了一些未设置样式的内容（iframe）。

这发生在 IE 和 Chrome 中，但不是 Firefox

【问题讨论】：

考虑过将 iframe 放在图片下方并在 iframe 加载时移除 img 吗？

标签： jquery cross-browser

【解决方案1】：

有点猜测，因为我们没有演示不良行为，但我认为您的问题是图像仍在占用 iframe 应该占用的空间。

您应该使用 CSS position: absolute 属性来确保它们在父 div 中具有相同的相对位置。

【讨论】：