显示所有图片等待它们完全加载后再显示。

Question

在。

<div id="all-images">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    <img src="images/4.jpg">
    <img src="images/5.jpg">
    <img src="images/6.jpg">
</div>

使用Jquery，当id="all-images"内的所有图片都完全加载后，我想要显示所有这些图片。

在加载所有图片之前，此段落将显示文本 "Loading..."。

- sujal

---

@JMax - 就我所知，那不是重复的。 - karim79

@karim79：没错，我看到了你的回答，我也太快读完问题了。 - JMax

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");
});

- karim79

---

非常有用...谢谢 - Sandeep Pal

Answer 2

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

尝试将一个负载事件处理程序附加到您的“all-images”div上。如果API是可信的，那么当所有子图像加载完成时，该事件将被触发。

因此，我会有一些document.onready处理程序来隐藏您的图像并插入“正在加载…”文本，然后您的负载事件处理程序将显示您的图像并删除加载文本。

希望这可以帮助您。

- danbo