jquery在元素加载时加载图像-jqueryloadingimagewhileelementsloads

Depending on what you are trying to do, it's not particularly hard. The following will show a loading image (pre-existing), then load some html retrieved via ajax, then upon completion, it will hide the loading image.

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

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

If the data to be loaded are images, then it gets a little tricker since the load callback may be called before the image data is actually downloaded. One strategy in that case is to have a script included with the HTML that knows how many images are to be loaded and have an onloaded event handler that basically ticks off the image count until all the images have been downloaded. I usually couple it with a timeout in case the onloaded handler doesn't get added before the image data is available (in which case it won't fire).

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

A general strategy is to place the loading image in a div or span tag, and show or hide it when you want to show it. If you want to show it initially, just place a jQuery .hide() function on the div or span in the jQuery on ready function.

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

See the jQuery docs on show() and hide()

查看show()上的jQuery文档和hide()

It's usually nothing more than:

它通常不过是:

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

function onComplete() {
    $('#throbber').remove();
}

But there are also cases where you don't even need Javascript. For example in case of large images. In that case you can do it using HTML and CSS:

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

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

and in HTML

并以HTML格式

You can generate the loader GIFs here: http://www.ajaxload.info/

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

There is a simplest way of doing this without using Show or hide. Because to use show or hide implies that you have to create a div somewhere inside which you would have placed your loading image which actually is not necessary. This is the way

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

 Load Page 1

LoadMe div

Once you have done this, you will NOT need to add any other additional div and use css to hide it because you will be using show or hide. And also this will make the loading image appear exactly where the things are supposed to load but the show and hide may not always allow the loading image to appear at the right place if you have a lot of stuff on the page that you want to load. Hope that helped.

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