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方法，这样当图像加载完毕后，您就可以捕捉到它。

e.g。

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

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

我已经整理了一点jsFiddle here，以便您可以看到它的实际效果。

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

1 个答案: