带有来自 URL 的 gif 的 HTML 预加载器答案

【问题标题】：Html preloader with gif from URL带有来自 URL 的 gif 的 HTML 预加载器
【发布时间】：2018-04-21 20:05:39
【问题描述】：

我有这个预加载器代码：

<div class="loading">
   <img src="https://media.giphy.com/media/jFIgJGFHHFxde/giphy.gif">
</div>

加载后如何将其带到中心并隐藏？

【问题讨论】：

标签： html css preloader

【解决方案1】：

将此 CSS 和 JS 代码编辑到您的应用程序中。并且预加载应该可以正常工作。

<!--JS-->

$('section').hide();
        $(window).on({
            load: function () {
                $('.loader').hide();
                $('section').show();

            }
        })

<!--CSS-->

#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

#loading-image {
    position: absolute;
    top: 100px;
    left: 240px;
    z-index: 100;
}

【讨论】：

【解决方案2】：

您可以使用 flex 轻松居中。

<style>
.loading {display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
}

.loading img {flex:1; margin: auto}

</style>

<div class="loading">
<img src="https://media.giphy.com/media/jFIgJGFHHFxde/giphy.gif">
</div>

【讨论】：