添加回調到jQuery CSS操作

在某些時候，我需要用照片替換div的背景圖像。但是，這大約需要5秒鐘，因此我想在完成此過程時顯示並隱藏加載屏幕。我試過了：

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

但是hideLoadingScreen（）在jQuery css發生之前執行。

我想添加hideLoadingScreen（）作爲jQuery css的回調。這可能嗎？

這裏是我的其他2個功能：

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

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

來源

2014-02-25 sunfish

[的.css（）]（http://api.jquery.com/css/）沒有回調函數。 –

我從來沒有用過它，但jquery有一個when（）函數，我相信它基本上允許你將任意方法附加到任何耗時的方法。 [鏈接]（https://api.jquery.com/jQuery.when/） – user3334690

@ user3334690耗時的方法必須返回延遲或承諾，或者實現承諾接口的東西..'.css（）'纔不是。 –

您可以嘗試加載在一個隱藏的img形象第一，所以你可以監聽load事件：

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

來源

2014-02-25 16:36:07

作爲我現在的代碼，參考我的問題中的第一部分代碼：第一個函數中的三個過程是同時運行，還是隻能一個接一個地運行？我相信我所要求的是同步還是異步？ – sunfish

它是同步的，除了它不會等待瀏覽器加載背景圖像。它會同步分配css值，但在繼續之前不會等待圖像加載。 –

css()沒有一個回調函數。但是，您可以通過，而不是時間設定爲0使用animate()：

function changeBackgroundImage(imageURL) { 
    showLoadingScreen(); 
    $("#imagePlaceholder").animate({ 
     background-image: imageURL 
    }, 0, function() { 
     hideLoadingScreen(); 
    }); 
}

來源

2014-02-25 16:51:33 Felix

添加回調到jQuery CSS操作

回答

相關問題