html 页中的页面加载器

Question

我正在尝试在此 html 页面的 div 部分显示加载器 GIF 图像。但我无法让它工作。 div 内容被隐藏，GIF 图片消失。

CSS:

.loader {
    background-image: url(image/Preloader_8.gif);
    background-repeat: no-repeat;
    height:100px;
    width:200px;
}

JavaScript:

<script type="text/javascript">
    $(window).load(function() {
        $(".loader").fadeOut("slow");
    })
</script>

Html:

<body>
    <div class="loader">
        Loading Image
    </div>
</body>

Answer 1

添加此代码：

$(document).ready(function(){
    $(".loader").fadeOut("slow");
})

jsfiddle

Answer 2

在您的代码中，加载器 class 分配给 div 部分，因此当您触发加载器页面淡出时，整个 div 分配给 class淡出。所以最好有 internal div 加载程序分配给。这可能有助于查看

<body>
  <div class="Image">
     <div class="loader">   
       Loading Image
     </div>
  </div>
</body>

Working example here

Answer 3

HTML

    <body>
      <div class="loader" style="display:none">
             Loading Image
      </div>
    </body>

js

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

请在您的网页顶部添加以下脚本

$(".loader").fadeIn();

在脚本上方添加加载 div

Answer 4

我认为你的代码原因：

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

没用是因为脚本是在文档完全加载后执行的。

以下代码有效。

if (document.readyState == 'complete') {
    $(".loader").fadeOut("slow");
} else {
    $(window).load(function () {
        $(".loader").fadeOut("slow");
    })
}

jsfiddle

Answer 5

您是使用 AJAX 来获取 div 中的内容还是只是使用 .load 函数？

如果是 .load() jQuery 事件，

$( ".loader" ).load( "test.html", function() { 
  $(".loader").fadeOut("slow"); 
});

在 AJAX 请求的情况下，在 AJAX 调用的成功事件中调用函数 loader。

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

Answer 6

在网页上显示 loader.gif 的最简单方法为：

<div id="divloader" class="ShowLoader">
    <img id="imgUpdateProgress" class="loaderIMG" src="../../images/newloader.gif" alt="Loading ..." title="Loading ..." />
</div>

CSS代码

<style>

.loaderIMG {
    padding: 10px;
    position: fixed;
    top: 45%;
    left: 45%;
    width: 80px;
}

.HideLoader {
    display: none;
}
</style>

jQuery代码：

 $(document).ready(function () {
            $("#divloader").addClass("HideLoader");
        });

首先通过显示警报消息检查您的 jQuery 库是否正常工作，然后通过浏览器检查元素检查图像路径。

html 页中的页面加载器

Page Loader in html page

html

javascript

jquery

loader