如何检查图像何时作为背景图像加载

Question

我正在使用此代码，以便在每个.item上加载页面后，应将其data-image作为背景图像放置。问题是#loadingsvg只有在(至少(加载了第一个图像时才应该淡出。我该如何检查？

<div id="myCarousel">
    <div class="item" data-image="asdf.jpg"></div>
    <div class="item" data-image="asdf2.jpg"></div>
    <div class="item" data-image="asdf23.jpg"></div>
</div>
jQuery(window).load(function() {
    jQuery('#myCarousel .item').each(function(){
        // Take data-image
        var $this = jQuery(this),
        src = $this.data('image');
        if (typeof src !== "undefined" && src != "") {
            // Set as background image
            $this.css('background', 'url(' + src + ')');
        }
        jQuery('#loadingsvg').fadeOut();
    });
});

Answer 1

您可以选择包含数据图像的元素，并使 jquery 代码在该元素加载函数 'complete' 后运行。

例如：

if ($("#image").complete) { yourFunction(); }

现在，在您的代码中，您希望在 css 更改(动画(后执行代码。你可以使用带有回调的承诺 - 看这里

在您的情况下：

if (typeof src !== "undefined" && src != "") {
            // Set as background image
            $this.css('background', 'url(' + src + ')').promise().done(function(){
                  jQuery('#loadingsvg').fadeOut();;
});

或者，一个不太优雅的解决方案：您可以在淡出之前添加超时，如下所示：

setTimeout(function(){jQuery('#loadingsvg').fadeOut();}, 1000);