jQuery：更改復選框上的圖像單擊

Question

我想在單擊復選框時更改圖像。 在新映像完全加載之前，加載程序映像應出現在當前映像的頂部。 加載時，當前圖像的不透明度也應更改為0.5。

因此，該功能應包括以下步驟：

在復選框上，單擊：

• 更改img src

加載時：

• 將當前圖像的不透明度設置為0.5
• 顯示loader.gif

加載新圖像時：

• 將不透明度更改回1.0
• 隱藏loader.gif
• 顯示新圖片

jQuery如何做到這一點？

預先感謝所有建議！

Answer 1

這些步驟實際上應該是

1. 在復選框上單擊，開始預加載新圖像
   首先創建一個Image對象，然后將其load屬性設置為一個函數，一旦圖像完全加載，該函數將被調用。 然后（ 在設置load屬性之后 ）將我們創建的Image對象的src屬性設置為圖像的Url。

2. 等待時，設置不透明度，顯示加載程序
   您可以使用css屬性opacity控制opacity 。 您應該已經在頁面中安裝了加載器，但是已經隱藏了，只需在進行預加載時顯示它即可。

3. 預加載完成后，隱藏預加載器，顯示圖像重置不透明度
   我們為定義的函數load屬性被調用和處理程序中，我們重新設置不透明度，隱藏預加載並設置src頁面我們元件與src我們創建的圖像對象的..

這是一個完整的示例： http : //www.jsfiddle.net/kqC9U/

Answer 2

好吧，讓我們花點時間分析一下問題：

如果要更改圖像源（幾乎可以立即完成），為什么需要加載程序gif？ 實際上，顯示加載程序gif所需的時間與顯示新圖像所需的時間相同。 如果您希望loader gif具有驚人的吸引力，則可以顯示loader.gif，等待5秒鍾，然后更改為新圖像。

更改圖像可以輕松地通過更改當前圖像上的src屬性來完成。 例如，

$.('#myCheckboxID').change(function()
{
    $.('#myPictureID').attr('src', "path/to/new/image/");
});

讓我知道是否您決定需要該gif加載器才能產生戲劇性的效果，我會幫助您進行連接

編輯：由於需要加載效果，請嘗試類似的操作。 我將寫下一些偽代碼，讓我知道它是否不夠具體。

Change the source on your first picture
Hide the first picture for x seconds (get a feel for how long it takes to load)
Unhide a loading gif of the same size with opacity already set
hide the loading gif and unhide the first picture