mouseover.js加載灰度圖像

Question

我有一個mouseover腳本的問題。一切正常，但我有一個小問題，我不知道如何解決。更確切地說，mouseover腳本創建灰度圖像懸停效果。當頁面加載彩色圖像顯示一小段時間（1秒或更短），然後JavaScript應用，他們都變灰，這正是應該如何工作。

我該如何製作彩色圖像，才能在應用javascript之前顯示彩色圖像？基本上，我希望灰度圖像在頁面加載之後不會出現。可能嗎？

您可以看到腳本here和問題here的網頁。

Answer 1

我會從HTML中刪除圖像並動態加載它們。

我會使用<a class="placeholder" href=""></a>作爲<img src="" />的佔位符，並且會將鏈接設置爲隱藏或設計良好。

$('a.placeholder').each(function() { 
    var src = $(this).attr('href'); 
    var image = new Image(); // this is not yet visible in the DOM. 
    image.onload = grayscale; // change the grayscale function to accept 
           // event parameters 
    image.src = src; // this triggers the onload event which 
            // grayscales the image 
    var dom_image = $('<img />').attr('src', src); 
    $(this).replaceWith(dom_image); 
}); 

當然，你必須做的準備文件不窗口負荷以上。