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

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

对于 .load() jQuery 事件，

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

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

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