加载事件完成后执行操作

Question

我有一些 jQuery 可以制作 div 'flash'，但我希望它只在页面加载到 div 后发生，而不是立即发生.

$('#div').load("page.php");
$('#div').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

有没有简单的方法可以做到这一点？

Answer 1

您可以使用load()的回调参数提供一个函数，该函数将在AJAX请求完成后执行。试试这个：

$('#div').load("page.php", function() {
  $(this).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
});

您应该注意，您可以单独使用 CSS 来实现闪烁效果。这将使JS更简洁，性能也更好：

// place this within the callback function
$('#div').addClass('blink_me');

.blink_me { animation: blinker .5s linear 3; }
@keyframes blinker { 50% { opacity: 0; } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  <span>Some content added by load()</span>
</div>

Answer 2

load() 确实有回调，您应该使用它。它仅在 load() 完成后执行。非常适合您正在寻找的东西：

$('#div').load("page.php", function() {
  $(this).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
});

加载事件完成后执行操作

Perform action after load event has completed

jquery

load