HTML页面中的页面加载器

Question

HTML页面中的页面加载器

6

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

- user3580570

您请求将加载类进行淡出效果，以便它在加载时消失。您想要实现什么效果？ - Thamilhan

我正在尝试加载动态获取自数据库的div内容，并提供带有gif加载器的加载消息给用户。当div内容加载完成后，gif图像将消失。 - user3580570

获取 div 中的内容。 - user3580570

首先在页面加载时检查 alert('show me'); 消息，以检查 jQuery 是否正常工作。如果是，则直接在页面上显示 loader.gif。 - Nazir Ullah

显示剩余2条评论

6个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

2

HTML

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

js

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

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

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

在脚本的正上方添加加载层。

- Alok Deshwal

2

我认为你的代码存在问题的原因是：

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

由于脚本在文档完全加载后才执行，所以“didn't work”的原因是如此。以下代码可行。

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

jsfiddle

- kaze13

2

最简单的在网页上展示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库是否正常工作，然后通过浏览器检查元素来检查图像路径。

- Nazir Ullah

2

在你的代码中，加载器类被分配给了 div 部分，因此当你触发加载器页面的淡出时，整个分配给类 fade 的 div 也会淡出。所以最好有一个内部的 div 来分配加载器。这可能会有所帮助。

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

Working example here

- rakesh

你能分享代码吗？如果你看到 GIF 加载然后包含它的 DIV 消失了，那么请按照之前提到的方法使用两个 DIV。否则，如果你通过 AJAX 加载内容，请在成功处理程序中添加淡出效果。 - rakesh

感谢您的评论。我正在使用在div中获取从数据库中提取的ajax内容。 - user3580570

然后就很简单了，在ajax调用之前加载图像，在成功处理程序中只需放置$（“.loader”）.fadeOut（“slow”）；记得将loader div放在content div内。 - rakesh

1

添加这段代码：

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

jsfiddle

- rifa_at_so

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Thamilhan · Accepted Answer

你是否正在使用AJAX获取div中的内容或者仅仅是.load()函数？在使用.load() jQuery事件时，

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

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

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