Question

<style>
    .bg {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
    }

    .loader {
        background-repeat: no-repeat;
        background: url('images/loader.gif');
        width: 100px;
        height: 100px;
        margin: 0px auto;
        top: 50%;
        position: absolute;
        left: 0px;
        right: 0px;
        margin-top: -21px;
    }
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">   </script>
<script type="text/javascript">
    $(window).load(function() {
    $(".bg").fadeOut('slow');
})
</script>

html代码是

<div class="bg">
    <div class="loader"></div>
</div>

它是一个页面加载器。当我们打开一个新页面它显示一个gif图像..这个代码在localhost上工作正常...但是当我把它放在服务器上时，gif图像永远不会在加载页面之后。

Answer 1

我的一个假设可能是找不到你的.gif

background: url('images/loader.gif');

根据我的经验，我必须使用asset-url / url-path或提供完整的资产路径。

Answer 2

只需在 index.html 的 head 标签内声明所有必需的 css 和脚本代码。你可以按照我下面给出的代码：

**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<script>
    //preloader
        function myFunction() {
            document.getElementById('loading').style.visibility = "hidden";
        }
        setTimeout("myFunction()", 8000);
</script>
<style>
 #loading {
            position: fixed;
            width: 100%;
            height: 100vh;
            background: rgb(24, 32, 39) url("./loading.gif") no-repeat center;
            z-index: 99999;

        }
</style>
</head>
<body>
    <!-- Pre loader-->
    <div id="loading" style="visibility: visible;">
    </div>
</body>

页面加载器在本地主机上正常工作..但在服务器上永远不会淡出？

2 个答案: