這個裝載機重複三次？

Question

<style> 
.loader { 
position: fixed; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
z-index: 9999; 
background-repeat: no-repeat; 
background: url('images/page-loader.gif'); 
} 
</style> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script> 
<script type="text/javascript"> 
$(window).load(function() { 
$(".loader").fadeOut("slow"); 
}) 
</script> 

HTML

使用IM，我的網站這部分代碼，代碼，但它正在重演三次..我還沒有使用重複的CSS，但它不幹活

Answer 1

這裏的工作示例你想要什麼..`

$(window).load(function() { 
 
    $(".bg").fadeOut('slow'); 
 
})

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

 
.loader { 
 
    background-repeat: no-repeat; 
 
    background: url('https://i.stack.imgur.com/3fjSD.gif'); 
 
    width: 42px; 
 
    height: 42px; 
 
    margin: 0px auto; 
 
    top: 50%; 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    margin-top: -21px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bg"> 
 
    <div class="loader"></div> 
 
</div>

`

Answer 2

您需要至少使用一個div來顯示加載程序。請看以下詳細信息，

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script> 

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

JS

$(window).load(function() { 
$(".loader").fadeOut("slow"); 
}) 

CSS

.loader { 
position: fixed; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
z-index: 9999; 
background: url('https://media.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif') no-repeat; 
} 

我已經把樣本圖像。