页面完全加载后如何修复加载 gif？

Question

我希望我的 gif animation 在页面完全加载后淡出。 现在加载后仍然会出现 gif。 我尝试了一些fadeOut javascript，但是整个页面都淡出。 如果您能提供帮助，我们将不胜感激，这是我的代码。

 var $body = $('.loading'); var loading = [{ elements: $body, properties: { width: '3%' } }, { elements: $body, properties: { width: '60%' } }, { elements: $body, properties: { width: '90%' } }, { elements: $body, properties: { width: '100%' } }, { elements: $body, properties: { height: '1260px' }, options: { complete: function() { $('.wrap').velocity('transition.slideLeftIn'); $('html').css({ background: 'white' }); } } } ]; $.Velocity.RunSequence(loading);

 <style>.loading { background: url("../img/icon.gif"); background-position: center; background-repeat: no-repeat; background-size: 40px; min-height: 100px; display: block; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }.wrap { opacity: 0; transform: none; } </style>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="loading"> <div class="wrap">contents</div> </div>

Answer 1

您可以使用fadeOut jquery function，然后删除或隐藏该元素。

$('.wrap').fadeOut( 1000, function() {
    $('.wrap').remove();
});

在您的代码中实现：

var loading = [
    { elements: $body, properties: { width: '3%' } },
    { elements: $body, properties: { width: '60%' } },
    { elements: $body, properties: { width: '90%' } },
    { elements: $body, properties: { width: '100%' } },
    { elements: $body, properties: { height: '1260px' }, options: { 
      complete: function () { 
        $('.wrap').fadeOut( 1000, function() {
           $('.wrap').remove();
        });
      }
    }
  }
];

然后在文档准备好后调用function。

$(document).ready(function(){
     $.Velocity.RunSequence(loading);
})

Answer 2

此代码正在运行

 $('.loading').css('background', 'transparent');