Jquery闪存的无格式内容(IE和Chrome)

时间:2011-11-23 15:18:08

标签: jquery cross-browser

  

可能重复:
  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

1 个答案:

答案 0 :(得分:2)

有点猜测,因为我们没有演示不良行为,但我认为你的问题是图像仍然占据了iframe应该占用的空间。

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