等待图像加载，然后执行所有其他代码

好吧，我对此失去了理智。 我确实在这里阅读了SO和谷歌关于它，我甚至有预装置设置（在这里找到了SO），但我找到的插件/代码都没有帮助我。

我想要做的是：等到所有图像都预先加载，然后才执行所有其他javascript代码。 就我而言，它可以（但不是必须）有一个“加载……”的消息。

事实上，我在身体背景中有一个非常大的图像和另外两个也更大的图像，所以我想预加载它们，这样它们就会立即显示，并且不会有那种难看的“加载”图像效果。

这就是我现在使用的，但它并不好：

$(document).ready(function() { preloadImages(); ...some other code... function preloadImages(){ imagePreloader([ 'images/1.png', 'images/2.jpg', 'images/3.png', ]); } function imagePreloader(arrayOfImages) { $(arrayOfImages).each(function(){ (new Image()).src = this; }); } } 

我不知道，也许我应该在.ready（）之外的某个地方调用这个预加载器？ 或者……那样，请帮忙……

顺便说一句，是的，我也读过这篇文章，我不知道为什么，但.ready（）对我来说更快:(

编辑：
好的，最后我得到了这个工作。 我的问题？ 我把等待的div设置错了。 这是我现在的代码：我有加载div，我在上面显示所有图像，然后当所有图像加载时（使用$（window）.load（function（）{…}）;如我所建议，隐藏该div。

 
 
  
 
 #loading { background-size: 100%; background-color:#000; width: 100%; height: 100%; margin: 0px; padding: 0px; z-index:999; } #waiting { margin-left: auto; margin-right: auto; position:absolute; top: 39%; left: 27.81%; width: 45%; height: 150px; background-color: #FFF; border: 12px solid #FF771C; text-align: center; } 

我的jQuery代码是这样的：

 $(window).load(function() { $('#loading').addClass('hidden'); ... } 

Answer 1

您可以在…上执行脚本，而不是尝试预加载。

 window.onload = function(){..} 

在加载所有图像之前，这不会触发。

Answer 2

我有一个名为waitForImages的插件，可以在加载后代图像时附加回调。

在您的情况下，如果您想等待所有资产下载， $(window).load()可能没问题。 但你可以用我的插件做得更酷:)

 var loading = $('#loading'); $('body').waitForImages(function() { loading.addClass('hidden'); }, function(loaded, total) { loading.html(loaded + ' of ' + total); }); 

Answer 3

我认为你正在寻找的是javascript：onLoad（），它会在浏览器完成加载后立即调用。

Answer 4

只有在加载后才能显示图像，如下所示：

Answer 5

waitForImages插件是一个有趣的插件，但解决方案可以通过以下方式实现：

  var counter = 0; var size = $('img').length; $("img").load(function() { // many or just one image(w) inside body or any other container counter += 1; counter === size && $('body').css('background-color', '#fffaaa'); }).each(function() { this.complete && $(this).load(); }); 

Answer 6

我相信最好的jQuery选项是使用ajax get调用：

 $.get('image.png', {}, function(){ // Do whatever you want here, this wont execute until image.png is preloaded });