Question

我有一个页面加载器，它将加载直到我的整个页面加载完成，这与chrome兼容，但在firefox中不支持。欢迎任何其他解决方案

<style>
 #loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100} 
</style>

<body>

 <div id="loading">
<img id="loading-image" src="images/loader.gif" alt="Loading..." />
</div> 



<script>
  window.onload = function(){ document.getElementById("loading").style.display = "none" }   
  </script>

</body>

Answer 1

这是u的完整答案：）

    #loader {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 30;
        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;
        display:block;
    }

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

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

那就是现在的风格

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

希望它会有所帮助：）

页面加载器在Firefox中不起作用

1 个答案: