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

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

例如：

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

现在在您的代码中，您希望在css更改（动画）后执行代码。您可以使用带回调的承诺 - 查看here

在你的情况下：

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);

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

1 个答案: