我的加载 gif 动画不起作用

Question

我有一个正在加载的 GIF：

但是当我用 GIF 显示 div 时，动画不起作用，GIF 像图像一样保持静止：

我的 div 的 HTML 代码：

<div id="modalPDF" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <div id="carregando">
                    <img alt="" src="imagens/refresh.gif"> 
                        <h4>Aguarde, gerando Arquivo...</h4>
                </div>
            </div>
        </div>
    </div>
</div>

显示 div 的 JavaScript 代码：

$('#modalPDF').modal('show');

OBS：在显示加载 GIF 之后，我运行了一个带有大量 JS 处理的递归方法。

Answer 1

这不是对您的 gif 内容的回答，而是作为您问题的替代解决方案。

使用 CSS 加载器而不是 gif，这样加载速度更快，对浏览器更友好。

要使用，你只需要调用screenLoader_Global()显示它并调用remove_screenLoader_Global()删除它，注意这里我使用jQuery但是你可以使用纯js轻松编写相同的功能。

思路很简单，使用js显示和隐藏CSS loader。

// loader (after submit)
$('input[type="button"]').on('click', function(e) {
		//display loader
    screenLoader_Global();
		//just for testing, remove loader
    setTimeout(function() {
      remove_screenLoader_Global();
    }, 3000);
});


/*-----------------------------------------------------
		global screen loader add/remove
	------------------------------------------------------*/
function screenLoader_Global() {
  $('<div class="loader-mask"><div class="loader"></div></div>').appendTo('body');
}

function remove_screenLoader_Global() {
  $('.loader-mask').remove();
}

/*-----------------------------------------------
	css loader (slack style)
-----------------------------------------------*/

.loader {
  position: relative;
  width: 5em;
  height: 5em;
  transform: rotate(165deg);
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  transform: translate(-50%, -50%);
}

.loader:before {
  animation: slackbefore 2s infinite;
}

.loader:after {
  animation: slackafter 2s infinite;
}

@keyframes slackbefore {
  0% {
    width: 1em;
    box-shadow: 2em -1em rgba(225, 20, 98, 0.75), -2em 1em rgba(111, 202, 220, 0.75);
  }
  35% {
    width: 5em;
    box-shadow: 0 -1em rgba(225, 20, 98, 0.75), 0 1em rgba(111, 202, 220, 0.75);
  }
  70% {
    width: 1em;
    box-shadow: -2em -1em rgba(225, 20, 98, 0.75), 2em 1em rgba(111, 202, 220, 0.75);
  }
  100% {
    box-shadow: 2em -1em rgba(225, 20, 98, 0.75), -2em 1em rgba(111, 202, 220, 0.75);
  }
}

@keyframes slackafter {
  0% {
    height: 1em;
    box-shadow: 1em 2em rgba(61, 184, 143, 0.75), -1em -2em rgba(233, 169, 32, 0.75);
  }
  35% {
    height: 5em;
    box-shadow: 1em 0 rgba(61, 184, 143, 0.75), -1em 0 rgba(233, 169, 32, 0.75);
  }
  70% {
    height: 1em;
    box-shadow: 1em -2em rgba(61, 184, 143, 0.75), -1em 2em rgba(233, 169, 32, 0.75);
  }
  100% {
    box-shadow: 1em 2em rgba(61, 184, 143, 0.75), -1em -2em rgba(233, 169, 32, 0.75);
  }
}


/* position to center */

.loader {
  position: absolute;
  top: calc(50% - 2.5em);
  left: calc(50% - 2.5em);
}


/**
 * disable background
 */

.loader-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <form method="post">
    <tr>
      <td colspan="5" align="right">
        <input type="button" class="submit btn btn-success farmlead-green fl-btn-submit" value="Submit" />
      </td>
    </tr>
  </form>
</table>