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

【问题标题】：How can i fix the loading gif after the page is fully loaded?页面完全加载后如何修复加载 gif？
【发布时间】：2021-02-18 05:47:16
【问题描述】：

我希望我的 gif 动画在页面完全加载后淡出。现在加载后仍然会出现 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>

【问题讨论】：

@Basith 感谢您的 cmets！我尝试了代码，但它没有通过页面并继续加载。我还使用了删除元素来加载，然后整个内容都被删除了。你觉得有什么办法只针对背景图片淡出吗？

标签： javascript html jquery css

【解决方案1】：

此代码有效

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

【讨论】：

【解决方案2】：

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

$('.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();
        });
      }
    }
  }
];

然后在文档准备好后调用该函数。

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

【讨论】：

@user15232620 能否请您发布您的完整代码。