仅在完全加载后显示所有图像

在

我想显示id =“all-images”的所有图像，只有当这个id里面的所有图像都将完全加载时（Jquery）。

在加载所有图像之前，此部分显示“正在加载…”文本

Answer 1

假设你的div被预先隐藏：

 $("#loadingDiv").show(); var nImages = $("#all-images").length; var loadCounter = 0; //binds onload event listner to images $("#all-images img").on("load", function() { loadCounter++; if(nImages == loadCounter) { $(this).parent().show(); $("#loadingDiv").hide(); } }).each(function() { // attempt to defeat cases where load event does not fire // on cached images if(this.complete) $(this).trigger("load"); }); 

Answer 2

http://api.jquery.com/load-event/

尝试将加载事件处理程序附加到“all-images”div。 如果要信任API，则在加载所有子图像时将触发该事件。

所以我会有一些document.onready处理程序，它会隐藏你的图像并插入“Loading …”文本，然后你的加载事件处理程序将显示你的图像并删除加载文本。

希望这可以帮助。