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

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

如果是.load（）jQuery事件，

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

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

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

Answer 2

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

{{1}}

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

在网页上显示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");
        });

首先通过显示alert msg检查您的jQuery库是否正常工作，然后从浏览器检查元素检查该图像路径。

Answer 6

添加此代码：

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

jsfiddle

html页面中的页面加载器

6 个答案: