jQuery加载图像，同时元素加载

Question

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

- michael

---

我制作了一个插件来简化所有这些。这是演示：http://jquery-values.googlecode.com/svn/other/loading/jquery.loading.htm - Nathan Bubna

Answer 1

根据您想要做什么，这并不是特别困难。以下内容将展示一个加载图像（预先存在），然后通过ajax获取一些html，完成后将隐藏加载图像。

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

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

- tvanfosson

Answer 2

通常情况下，它仅仅是：

function onAGivenEvent() {
    $('someContain').append('<div id="throbber"></div>');
    // 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中

<img class="largeImage" src="..." />

- elmuerte

Answer 3

一般的策略是将加载图片放在一个 div 或 span 标签中，并在需要显示它时显示或隐藏它。如果你想要最初显示它，只需在 jQuery 的 on ready 函数中给 div 或 span 添加一个 jQuery .hide() 函数。

参见 jQuery 对 show() 和 hide() 的文档

- jonstjohn

---

或者将div的背景图像设置为“loading”图像。然后你就什么都不用做了（除非浏览器在加载时绘制占位符）。 - Philippe Leybaert

Answer 4

您可以在这里生成加载动画： http://www.ajaxload.info/

- Mat Ryer

Answer 5

有一种最简单的方法可以做到这一点，而无需使用“显示”或“隐藏”。因为使用显示或隐藏意味着您必须在某个地方创建一个

，其中您将放置实际上并不必要的加载图像。以下是方法：

 <a href="mypage.php" rel="charger">Load Page 1</a>

<div id="LoadMe">LoadMe div</div>

<script>


    $('a[rel*=charger]').click(function() {

    $('#LoadMe').html('<img src="images/facebook_style_loader.gif" />');

  $('#LoadMe').load($(this).attr('href'));



  return false;
});




</script>

一旦你完成了这个步骤，你就不需要添加任何其他的div并使用css来隐藏它，因为你将使用show或hide。而且这将使加载图像出现在应该加载的地方，但如果页面上有很多你想要加载的东西，show和hide可能不总是允许加载图像出现在正确的位置。 希望这有所帮助。

- John Max