jquery在元素加载时加载图像

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

Answer 1

根据你想要做的事情，这并不是特别难。 下面将显示加载图像（预先存在），然后加载通过ajax检索的一些html，然后在完成时，它将隐藏加载图像。

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

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

Answer 2

一般策略是将加载图像放在div或span标记中，并在您想要显示时显示或隐藏它。 如果你想最初展示它，只需在jQuery on ready函数的div或span上放置一个jQuery .hide（）函数。

查看show（）上的jQuery文档和hide（）

Answer 3

它通常不过是：

 function onAGivenEvent() { $('someContain').append('
'); // do some slowthings with a "on complete callback to onComplete } function onComplete() { $('#throbber').remove(); } 

但也有一些情况你甚至不需要Javascript。 例如，在大图像的情况下。 在这种情况下，您可以使用HTML和CSS来做到这一点：

 img.largeImage { background: url(throbber.gif) center no-repeat; } 

并以HTML格式

Answer 4

您可以在此处生成加载器GIF： http ： //www.ajaxload.info/

Answer 5

没有使用Show或hide，有一种最简单的方法。 因为要使用show或hide意味着你必须在某个地方创建一个div，你可以在其中放置实际上没有必要的加载图像。 这就是方法

  Load Page 1 
LoadMe div
  

一旦你完成了这个，你将不需要添加任何其他额外的div并使用css来隐藏它，因为你将使用show或hide。 此外，这将使加载图像准确显示在应该加载的位置，但是如果页面上有很多要加载的内容，则显示和隐藏可能并不总是允许加载图像出现在正确的位置。 希望有所帮助。