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

我在我的网站上使用这个加载程序代码，但它重复了三次..我也没有使用重复css但它不起作用

Answer 1

以下是您想要的工作示例..

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

`

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;
}

我已经放了样本图片。

这个装载机重复三次？

2 个答案: