Question

我正在开发一个包含大量MP3和图像的网站，这显然有一些加载时间。我想在加载所有内容时显示加载页面。

我不知道如何实现这一点，但我确实有想要使用的GIF动画。

有什么建议吗？

Answer 1

所以基本上你制作一个预加载器，其视口宽度和高度均为100％，设置背景颜色和GIF。以下JS的作用是等待所有内容都加载，然后预加载器淡出。

$(window).load(function(){
  $('#preloader').fadeOut('300', function(){
    $(this).remove();
  });
});

Answer 2

您需要添加js

<script type="text/javascript">
    $(window).on('load', function () {
        var $preloader = $('#page-preloader'),
        $spinner   = $preloader.find('.spinner');    

        $spinner.fadeOut();
        $preloader.delay(350).fadeOut('slow');
    });
</script>

HTML：

<div id="page-preloader">
    <span class="spinner"></span>
</div>

CSS：

tbody tr td{
    max-width: 300px;
}
h1 {
    text-transform: uppercase;
    text-align: center;
}
.container>a:hover {
    text-decoration: none;
}
#page-preloader {
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background: #fff;
   z-index: 100500;
}
#page-preloader .spinner {
   width: 100%;
   height: 100%;
   position: absolute;
   background: url('YOUR-IMAGE-NAME.gif') no-repeat 50% 50%;
   margin: -16px 0 0 -16px;
}

不要忘记在项目中添加JQuery！

如何在网站内容加载时显示加载html页面？

2 个答案: