jquery 在元素加载时加载图像

Question

我正在寻找有关在元素加载时插入加载 GIF 的任何教程/文章，我在一些网站上看到过它。我似乎只能找到有关预加载图像的文章。

Answer 1

根据您想要做什么，这并不是特别难。下面将显示一个加载图像(预先存在的)，然后加载一些通过ajax检索到的html，然后完成后，它将隐藏加载图像。

$(function() {
   $('#activate').click( function() {
      $('#loadingImg').show();
      $('#whereItGoes').load( 'url-to-data-to-be-loaded', function() {
          $('#loadingImg').hide();
      });
   });
});

如果要加载的数据是图像，那么它会变得有点棘手，因为加载回调可能会在图像数据实际下载之前被调用。在这种情况下，一种策略是在 HTML 中包含一个脚本，该脚本知道要加载多少图像，并具有一个 onloaded 事件处理程序，该处理程序基本上会勾选图像计数，直到下载所有图像。我通常将其与超时结合起来，以防在图像数据可用之前未添加加载的处理程序(在这种情况下它不会触发)。