jquery在元素加载时加载图像

我正在寻找关于在元素加载时插入加载GIF的任何教程/文章,我在一些网站上看到过.我似乎只能找到有关预加载图像的文章. 根据你想要做的事情,这并不是特别难.下面将显示一个加载图像(预先存在),然后加载一些通过ajax检索的html,然后在完成时,它将隐藏加载图像.

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

如果要加载的数据是图像,则由于在实际下载图像数据之前可能会调用加载回调,因此它会变得有点小问题.在这种情况下,一种策略是在HTML中包含一个脚本,该脚本知道要加载多少图像,并且有一个加载的事件处理程序,它基本上会勾选图像计数,直到所有图像都被下载完毕.我通常将它与超时结合,以防在图像数据可用之前没有添加加载的处理程序(在这种情况下它不会触发).