javascript - 在显示 div 之前加载图像

Question

我以前从未在这个论坛上问过任何问题，所以我会尽量说清楚。 当 div 的内容加载到我的网站时，我试图显示一个加载屏幕。

我尝试使用 jQuery .load() 函数，但它似乎不起作用。 它在我使用 .ready() 函数时有效，但我想在显示 div 之前加载所有图像。

所以 div 是隐藏的 (style="display:none;")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text </div>

<script>
$("#divtoshow").load(function(){
  $("#loading").fadeOut(200);
  $("#divtoshow").fadeIn(200);
});
//if i replace load with ready it works
</script>

Answer 1

当页面上的所有图像都已加载时，您想做一些特别的事情。试试这个自定义 jQuery 事件...

/**
 * Exposes an event called "imagesLoaded" which is triggered 
 * when all images on the page have fully loaded.
 */
(function($) {
    var loadImages = new Promise(function(done) {
        var loading = $("img").length;
        $("img").each(function() {
            $("<img/>")
                .on('load', function() {
                    loading--;
                    if (!loading) done();
                })
                .on('error', function() {
                    loading--;
                    if (!loading) done();
                })
                .attr("src", $(this).attr("src"))
        });
    });
    loadImages.then(function() {
        $(document).trigger({
            type: "imagesLoaded"
        });
    });
})(jQuery);

它的工作原理是复制每个图像(如果它们已经加载，这是捕获加载事件所必需的)并监听副本上的加载。我的想法来自 here .

Here is a fiddle.