jquery - 将图像添加到 dom，然后等待它们加载

Question

这是一个简单的问题。。

我得到一个播放列表，然后我想将每个图像加载到 dom * 有视频。

所以在所有媒体加载完成后，我希望能够调用一些函数。

但在下面的例子中，console.log("loaded + images")由于 DOM 已加载，该部分立即被调用，然后图像被添加。我该怎么做才能告诉我所有这些图像何时加载？

     <script type="text/javascript">
            _.each(playlist, function(el) {
                $(".hidden").append("<img src='"+ el.path +"''>")
            });
    </script>
    <script type="text/javascript">
        $(window).ready(function() {
            console.log("loaded + images")
        });
    </script>

Answer 1

您可以load为动态创建的图像添加一个方法，以便在图像完成加载后，您可以捕获它。

例如

var img = $('<img />', { attr: { src: el.path }}).load(function(){
    // your code here
}));
$(".hidden").append(img);

有了这个，你可以有一个全局计数来检查你拥有的图像数量。当加载的图像的全局计数与图像的总数匹配时，您可以调用您的console.log("loaded + images");代码。

我在这里整理了一个小 jsFiddle，以便您可以看到它的实际效果。