为什么在IE上，当我在页面重新加载之前将其添加到dom时，我的覆盖图没有显示？

Question

On ie if i do something like this: 在ie，如果我做这样的事情：

var aOverlay = $('<div>');
aOverlay.addClass("modal_overlay");    
aOverlay.prependTo(aAppendTo);
window.location.reload(false);

then the overlay is not show at all. 那么叠加层根本不会显示。 but if i replace 但是如果我更换

window.location.reload(false);`

with 同

setTimeout(function(){window.location.reload(false);},300)

then it works. 然后就可以了。 Why ? 为什么呢

Answer 1

It is a browser-specific quirk if changes before the reload get displayed or not. 是否显示重新加载之前的更改，这是特定于浏览器的问题。 IE is trying to optimize page rendering by delaying page updates until all page updating has stopped. IE试图通过延迟页面更新直到所有页面更新都停止来优化页面呈现。

Q: If the page is about to be discarded, should recent page updates be rendered? 问：如果要丢弃该页面，是否应该呈现最近的页面更新？

A1: No! A1：不！ A new page is coming, so simply display that. 即将出现一个新页面，因此只需显示它即可。 (IE) （IE）

A2: Yes! A2：是的！ The updates are what the user is going to be staring at while the new page is fetched from the server. 从服务器获取新页面时，用户将盯着更新。 (Chrome, Firefox, Opera, Safari) （Chrome，Firefox，Opera，Safari）

The solution, as you found with setTimeout(...,300) , is to delay for a short interval before reloading the page. 正如使用setTimeout(...,300)发现的，解决方案是在重新加载页面之前延迟一小段时间。 This forces page updates to be rendered, so that they can be visible during the delay interval. 这将强制呈现页面更新，以便它们在延迟间隔内可见。

The delay can be shorter than 300ms. 延迟可以短于300ms。 In fact, it can be 0 or omitted entirely. 实际上，它可以为0或完全省略。 According to W3C standards, the interval is actually a minimum of 4ms. 根据W3C标准，间隔实际上至少为4ms。

This sample renders the overlay as a translucent gray layer over the entire page: 此示例将覆盖图呈现为整个页面上的半透明灰色层：

    <?php sleep(1); /* simulate typical server delay */ ?>
    <!DOCTYPE html><html><head>
    <style>
    .gray_overlay { position:fixed; top:0; left:0; height:100%; width:100%; 
       padding:0; margin: 0; z-index:999; background-color:#202020; opacity:0.4 }
    button { display:block; margin:20px }
    </style></head><body>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    This is some text. Server takes 1s to respond.
    <button onclick="v1()">Version 1: Show overlay then reload instantly.</button>
    <button onclick="v2()">Version 2: Show overlay then reload in 0ms.</button>
    <script>
    var aAppendTo = $('body');
    var aOverlay = $('<div>');
    aOverlay.addClass("gray_overlay");    
    function v1() {
        aOverlay.prependTo(aAppendTo);
        window.location.reload();
    }
    function v2() {
        aOverlay.prependTo(aAppendTo);
        setTimeout(function(){window.location.reload();});
    }
    </script>
    </body></html>

在此处输入图片说明

为什么在IE上，当我在页面重新加载之前将其添加到dom时，我的覆盖图没有显示？

问题描述

1 个解决方案

解决方案1
0 2015-01-17 16:39:37

为什么在IE上，当我在页面重新加载之前将其添加到dom时，我的覆盖图没有显示？

问题描述

1 个解决方案

解决方案1 0 2015-01-17 16:39:37

解决方案1
0 2015-01-17 16:39:37