jquery - 添加回调到 jQuery CSS 操作

Question

我在做网站。

有时，我需要用照片替换 div 的背景图像。但是，这需要大约 5 秒，所以我想在此过程完成时显示和隐藏加载屏幕。我试过:

function changeBackgroundImage(imageURL) {
    showLoadingScreen();
    $("#imagePlaceholder").css('background-image', imageURL);
    hideLoadingScreen();
}

但是 hideLoadingScreen() 是在 jQuery css 发生之前执行的。

我想添加 hideLoadingScreen() 作为 jQuery css 的回调。这可能吗？

这是我的另外两个函数:

function showLoadingScreen(){
    $('#pleaseWait').removeClass('hidden');
    console.log('show loading');
}

function hideLoadingScreen(){
    $('#pleaseWait').addClass('hidden');
    console.log('hide loading');
}

Answer 1

您可以先尝试在隐藏的 img 中加载图像，这样您就可以监听 load 事件:

function changeBackgroundImage(imageURL) {
    showLoadingScreen();
    $('<img/>').load(function () {
        $("#imagePlaceholder").css('background-image', imageURL);
        hideLoadingScreen();
        $(this).remove();
    }).attr('src', imageURL);
}