html页面中的页面加载器答案

【问题标题】：Page Loader in html pagehtml页面中的页面加载器
【发布时间】：2016-01-22 14:58:32
【问题描述】：

我正在尝试在此 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>

【问题讨论】：

代码没有问题。你确定，你添加了对 jQuery 库的引用？
您已请求淡出加载器类。所以它在加载时消失。你想要完成什么？
我用的是上面的代码跨度>
我正在尝试加载动态的 div 内容并从数据库中获取，并通过 gif 加载器向用户提供加载消息。当加载 div 内容时，gif 图像将消失。
可能跑题了，但窗口load event 没有考虑异步调用（AJAX、REST）。有一个很好的utility called PACE 可以解决所有问题。只需包含并完成...

标签： javascript jquery html loader

【解决方案1】：

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

在 .load() jQuery 事件的情况下，

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

如果是AJAX请求，在AJAX调用成功时调用函数loader。

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

【讨论】：

【解决方案2】：

HTML

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

js

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

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

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

在上面的脚本之上添加加载 div

【讨论】：

【解决方案3】：

我认为你的代码的原因：

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

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

以下代码有效。

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

jsfiddle

【讨论】：

【解决方案4】：

在您的代码中，加载器类被分配给 div 部分，因此当您触发加载器页面的淡出时，分配给类的整个 div 淡出。所以最好有加载器分配到的内部 div。这可能有助于检查

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

Working example here

【讨论】：

可以分享代码吗？如果您看到 gif 加载然后包含的 div 消失意味着，请使用前面提到的两个 div。否则，如果您通过 ajax 加载内容，则在成功处理程序中添加淡出
感谢您的评论。我在 div 中使用 ajax 内容。将从数据库中获取。 ..
那么它很简单，在 ajax 调用之前加载图像并在成功处理程序中放入 $(".loader").fadeOut("slow");记得在内容 div 中包含加载器 div。

【解决方案5】：

在网页上显示 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 库是否工作，然后从浏览器检查元素检查该图像路径。

【讨论】：

【解决方案6】：

添加此代码：

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

jsfiddle

【讨论】：