Question

我有这个示例代码：

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- This next would probably be in your main CSS file, but shown
     inline here just for purposes of the example
-->
<style type="text/css">
body {
    /* Hide it for nifty fade-in effect */
    display: none;
}
</style>
<!-- Fallback for non-JavaScript people -->
<noscript>
<style type="text/css">
body {
    /* Re-displays it by overriding the above */
    display: block;
}
</style>
</noscript>
</head>
<body>
...content...
<script src="jquery.js"></script>
<script>
// This version runs the function *immediately*
(function($) {

$(window).load(function() {
$(document.body).fadeIn(1000);
});

})(jQuery);
</script>
</body>
</html>

正如您所看到的，网页等待它加载然后淡入。但在某些情况下，某些用户可能网络速度较慢，并且可能会因网站需要一段时间加载而感到困惑。我试图寻找jQuery或其他预加载器，但似乎没有一个可以使用我的代码。我怎么能在这段代码中添加一个小的，居中的加载gif，让用户知道网页确实正在加载？

此外，这与同一个网站有关，所以我不想发布另一个问题。每次重新加载页面时，我的后台img都会随机更改。这是代码：

<script>
$(document).ready(function(){

var upperLimit = 13;

var randomNum = Math.floor((Math.random() * upperLimit) + 1);    


 $("#banner").css("background-image","url('css/images/overlay.png'), url('images/" + randomNum + ".jpg')")


 });
 </script>

效果很好。现在，我唯一想知道的小事是，我怎么能让那个背景img淡入？我似乎无法通过添加.fadeIn（1000）来使其工作;代码。

$("#banner").css("background-image","url('css/images/overlay.png'), url('images/" + randomNum + ".jpg')").fadeIn(1000);

我怎样才能让它淡入淡出呢？它看起来有点整洁？

Answer 1

您可以为loader元素定义一些HTML，然后在淡入页面时将其淡出。

但是目前您正在隐藏/淡化页面正文。您需要将所有要推迟显示的内容包装为另一个元素作为加载器的兄弟。

例如：

<body>
  <div id="loader"><img src="loading-image.png"></div>
  <div id="page-content">
    <!-- content here -->
  </div>
</body>

然后您更改CSS和JS以引用#page-content而不是body。

如果您正在淡入页面，为什么它也不会淡化横幅图片？我想你可以用同样的机制包装它。

网站fadein之前的装载程序

1 个答案: