如何防止徽标导致导航栏在加载时发生抖动

我一直在尝试找到一段时间的解决方案，但似乎没有任何工作。如何防止徽标导致导航栏在加载时发生抖动

我在浏览网站上的任何页面和所有页面时都遇到了这个问题 - 这非常烦人。

尽管我期望网站图片需要时间加载，但此加载会影响我的导航栏和我网站徽标的加载。在加载每个页面所需的时间内，我的网站徽标完全不存在 - 这会导致我的导航栏一直向上移动，直到徽标出现。这通常需要大约一秒的时间，但它也完全依赖于用户的互联网连接）。

如何防止这种情况发生？这会导致我的整个网站在浏览时“反弹”，并且所有内容都会在徽标不存在的情况下向上移动一小段时间。

来源

2017-06-20 Cris

1-使用预加载器/ 2-延迟加载图像/ 3-确保图像是渐进式JPEG（我建议将2和3结合使用） –

给你的形象标签的绝对高度属性。这将使浏览器保持img标签的高度，并允许元素在适当的位置加载。

来源

2017-06-20 15:21:19 sk03

您还可以尝试调整加载程序以仅在加载页面中的所有元素时加载页面。像这样简单：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
/* Center the loader */ 
#loader { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    z-index: 1; 
    width: 150px; 
    height: 150px; 
    margin: -75px 0 0 -75px; 
    border: 16px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 16px solid #3498db; 
    width: 120px; 
    height: 120px; 
    -webkit-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite; 
} 

@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); } 
} 

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

/* Add animation to "page content" */ 
.animate-bottom { 
    position: relative; 
    -webkit-animation-name: animatebottom; 
    -webkit-animation-duration: 1s; 
    animation-name: animatebottom; 
    animation-duration: 1s 
} 

@-webkit-keyframes animatebottom { 
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 } 
} 

@keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 } 
} 

#myDiv { 
    display: none; 
    text-align: center; 
} 
</style> 
</head> 
<body onload="myFunction()" style="margin:0;"> 

<div id="loader"></div> 

<div style="display:none;" id="myDiv" class="animate-bottom"> 
    <h2>Tada!</h2> 
    <p>Some text in my newly loaded page..</p> 
</div> 

<script> 
var myVar; 

function myFunction() { 
    myVar = setTimeout(showPage, 3000); 
} 

function showPage() { 
    document.getElementById("loader").style.display = "none"; 
    document.getElementById("myDiv").style.display = "block"; 
} 
</script> 

</body> 
</html>

随着一些修改，可以帮助UI体验！

来源：W3 Schools

希望它能帮助！

来源

2017-06-20 15:23:12 cosinepenguin

如何防止徽标导致导航栏在加载时发生抖动

回答

相关问题