Question

我有gif图片，我想加载显示加载网站的gif图片，直到页面完全加载为止。我尝试gif图片效果不佳。 Gif直到网站完全加载才动画。任何人都可以帮助我吗？这是我的代码：

<head>
  <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>
  <style type="text/css">
    .loader {
      background: url('image/loading.gif') 50% 50% no-repeat rgb(0, 0, 0);
      background-color: black;
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 999999999999999999999999999999999999999;
      opacity: .7;
    }
  </style>
  <div class="loader">

    <body>
    </body>

这是我的网站链接a link

Answer 1

尝试在window.load函数之前显示你的加载器：

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

此代码应显示您的加载程序，当您的网站加载时，加载程序应缓慢淡出。如果你在加载过程中隐藏你的网站背景，在你的网站上添加一个叠加层：创建一个带有背景和高z-index的“叠加”类的div，将你的加载器放在你的div中，这应该有效。

Answer 2

这是另一种选择： -

添加此代码是一种非常简单的方法，可以在您的＆＃34; W-E-B == P-A-G-E＆＃34;

上添加加载程序

►代码

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script>
jQuery(document).ready(function($) {  
$(window).load(function(){
    $('#preloader').fadeOut(5000,function(){$(this).remove();});
});
});
</script>
  <style type="text/css">
    .js div#preloader {position: fixed; left: 0; top: 0; z-index:99999; width: 100%; height: 100%; overflow: visible; background:#fff url('images/loader.gif') no-repeat center center;background-size:60px 60px;}
  </style>
  <div class="loader">
    <div id="preloader"></div> <--USE-THIS-DIV-->
    <body>
    </body>
  </div>
</html>

希望这会对你有所帮助！继续编码!!

Answer 3

检查以下代码......

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function (e) {
        myVar = setTimeout(showPage, 3000);
    });
    function showPage() {
        document.getElementById("loader").style.display = "none";
        document.getElementById("myDiv").style.display = "block";
    }
</script>
<style type="text/css">
    .loader {
        background: url('loader.gif') 50% 50% no-repeat rgb(0, 0, 0);
        background-color: black;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 999999999999999999999999999999999999999;
        opacity: .7;
    }
</style>
<body id="myDiv" style="margin:0;">
    <div id="loader" class="loader">&nbsp;</div>
    Hello this is a testing...........
</body>

由于

Answer 4

我已经检查过但你没有正确整合。

在本地运行我的代码然后告诉我你是否遇到任何问题。

谢谢。

gif图像加载直到页面完全加载？

4 个答案: