在我的内容用Javascript淡入后，如何加载页脚？

我的网站上的缩略图在加载时一次消失一个。我想知道如何才能让页脚在我的缩略图之后出现，这样它就不会立即显示，并随着图像淡入而被按下

<script type="text/javascript">

    $(window).load(function() {
        var images = $('figure');
        var imageCount = images.length;
        var count = 0;

        var fadeImages = function(image, callback) {
            $(image).fadeIn(170, function() {
                // Increase the count.
                count++;
                if (images[count]) {
                    // Pass the callback to the recursively called function.
                    fadeImages(images[count], callback);
                }
            });

            // Make sure that we're only calling the callback once the images have all loaded.
            if (typeof callback === 'function' && count === imageCount) { 
                callback.call(this); // brings the scope to the callback
            }
        };

        fadeImages(images[0], function() {
            alert('Load footer');  // your callback here
        });
    });
 </script>

经过一些初步的研究，我意识到我需要向函数中添加某种回调，所以我在中添加了一个警报，但由于某种原因，在图像淡入后它不会弹出

<script type="text/javascript">

    $(window).load(function() {
        var images = $('figure');
        var imageCount = images.length;
        var count = 0;

        var fadeImages = function(image, callback) {
            $(image).fadeIn(170, function() {
                // Increase the count.
                count++;
                if (images[count]) {
                    // Pass the callback to the recursively called function.
                    fadeImages(images[count], callback);
                }
            });

            // Make sure that we're only calling the callback once the images have all loaded.
            if (typeof callback === 'function' && count === imageCount) { 
                callback.call(this); // brings the scope to the callback
            }
        };

        fadeImages(images[0], function() {
            alert('Load footer');  // your callback here
        });
    });
 </script>

$（窗口）。加载（函数（）{
变量图像=$（‘图’）；
var imageCount=images.length；
var计数=0；
var fadeImages=函数（图像，回调）{
$（图像）.fadeIn（170，函数（）{
//增加计数。
计数++；
如果（图像[计数]）{
//将回调传递给递归调用的函数。
fadeImages（图像[计数]，回调）；
}
});
//确保我们只在图像全部加载后调用回调。
if（typeof callback=='function'&&count=='imageCount）{
callback.call（this）；//将范围带到回调
}
};
fadeImages（图像[0]，函数（）{
警报（'Load footer'）；//您的回调在这里
});
});

你会在我的网站上看到我的意思

我的主要问题是：

1） 如何让回调函数在图像加载后运行

2） 有没有人能给我指出正确的方向，写些什么让页脚在图像消失后出现

---

任何帮助都将不胜感激

您需要在所有图像上绑定名为onload的回调 例如，使用jquery，您有10个图像：

var imagesLoaded = 0;
    // alter this selector to match only your images you want to wait for
    $("img").load(function() {
       imagesLoaded++;
       if(imagesLoaded == 10) {
          // all 10 images are loaded, show footer
       }
});

---

请尝试仅在加载所有图像后调用回调

编辑：显示正在运行的代码

var images = $('figure');
var imageCount = images.length;
var count = 0;

var fadeImages = function(image, callback) {
    $(image).fadeIn(170, function() {
        // Increase the count.
        count++;
        if (images[count]) {
            // Pass the callback to the recursively called function.
            fadeImages(images[count], callback);
        }
    });

    // Make sure that we're only calling the callback once the images have all loaded.
    if (typeof callback === 'function' && count === imageCount - 1) { 
        callback.call(this); // brings the scope to the callback
    }
};

fadeImages(images[0], function() {
    alert('Load footer');  // your callback here
});

---

由于在任何动画之前都会调用

load

函数，所以您不会仍然有问题吗？在本例中，

fadeIn

？只需将此逻辑移到fadeIn回调函数，感谢Daniel的响应，但我尝试过了，警报根本没有弹出。你认为这可能是因为我使用的是Figure元素吗？好的-使用上面的代码检查这个JSFIDLE，您将看到它正在工作，并且页脚逐渐变浅：-如果您在将此应用于代码时遇到任何问题，请告诉我。我的原始代码中也有一个错误-

count

如果它从零开始，将永远不等于

imageCount

，但我们需要它为零作为图像索引。因此，您将看到有一点发生了变化，将

count

与

imageCount-1

进行比较！非常感谢你！