Question

我有这个预加载器代码：

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

如何将它带到中心并在装载后隐藏？

Answer 1

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

＆＃13;

<!--JS-->

$('section').hide();
        $(window).on({
            load: function () {
                $('.loader').hide();
                $('section').show();

            }
        })

＆＃13;

<!--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;
}

＆＃13;

Answer 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>

来自URL的gif的html预加载器

2 个答案: