javascript - mouseover.js 加载灰度图像

Question

我的鼠标悬停脚本有问题。一切正常，但我有一个小问题，我不知道如何解决。更准确地说，鼠标悬停脚本会创建灰度图像悬停效果。当页面加载时，彩色图像会显示很短的时间（1 秒或更短时间），然后应用 javascript，它们全部变灰，这正是事情应该如何工作的。

我怎样才能使它在应用 javascript 之前不会出现彩色图像？基本上，我希望在页面加载后而不是之后显示灰度图像。是否可以？

您可以在此处查看脚本，并在此处查看相关网页。

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

当然，您必须在准备好文档而不是在窗口加载时执行上述操作。