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处理程序（在这种情况下它不会触发）。

Answer 2

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

请参阅jQuery docs on show() and hide()

Answer 3

通常不过是：

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="..." />

Answer 4

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

Answer 5

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

 <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。此外，这将使加载图像准确显示加载内容的位置，但如果页面上有很多要加载的内容，则显示和隐藏可能并不总是允许加载图像出现在正确的位置。希望有所帮助。

jquery在元素加载时加载图像

5 个答案: