Question

我的问题与其他问题类似，但有一点麻烦。

我试图按如下方式注入div：

var headerDiv = document.getElementById("headerDiv");
if (headerDiv) {

    var logo = document.createElement('div');
    logo.id = "my-header";
    //logo.style.display = "none";

    var innerHTML = '   <div id="my-header-image"></div>' +
                    '   <div id="my-header-text">' +
                    '       My header text' + 
                    '   </div>  ';
    logo.innerHTML = innerHTML;
    headerDiv.insertBefore(logo, headerDiv.firstChild);     
}

headerDiv之前已经存在于页面中并且呈现得很好。我只在DOM准备就绪时调用我的代码。

我的问题如下：当注射发生时，＆＃34; logo＆＃34;页面上的blits作为一个完全白色的div一瞬间。如果你看起来不好，它几乎不会引人注意。然后应用样式，一切都恢复正常。

在IE11（IE10模式或边缘模式）和 Chrome 中都会发生这种情况。

当我使用jQuery 而不是insertBefore时，它没有发生。

这是CSS：

#my-header {
    pointer-events: none; /* the clicks must go through -- to the native Sharepoint buttons underneath. Required for Edge compatibility. */
    display:block;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1000;
    height: 50px; 
    overflow: auto;

    /* fade-in */
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

#my-header-text {
    display:inline-block;
    padding: 0;
    position: relative;
    bottom: 15px;
    margin-left: 18px;
    color: white;
    font-size: 1.0em;
}


#my-header-image {
    display:inline-block;
    content: "";

    top: 3px;
    left: 20px;
    width : 184px; /* same size as logo image */
    height : 38px;

    margin-top: 6px;
    background-image: url("https://MY_URL/logo.png");
    background-size: contain;
    background-repeat:   no-repeat;
    background-position: center center; 
}



/* fade-in animation definition */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

这可能是由淡入动画引起的吗？系统不知道如何处理一个应该开始不可见的新元素（因为动画）？

我注意到＆＃34; logo＆＃34;闪烁高于＆＃34; headerDiv＆＃34;尽管其绝对定位，但不是在顶部。在渲染的早期阶段，在添加div的时间和应用其样式的时间之间忽略某些属性的另一个线索。

Answer 1

我用肮脏的解决方法解决了这个问题：

在JS中：

...
var logo = document.createElement('div');
logo.id = "my-header";
logo.style.height = "0"; // <-- new
...

在CSS中：

#my-header {
    ...
    height: 50px !important; /* <-- made it important */
    ...
}

正如您所理解的那样，强制使对象不可见，并强制不要占用JS创建时间与样式应用时间之间的任何屏幕空间（通过高度= 0）。 CSS。

因此，眨眼仍然在概念上发生，但其效果不明显。

在没有屏幕闪烁的情况下添加div

1 个答案: