鼠标悬停.js加载灰度图像

mouseover.js load grayscale image

本文关键字：灰度图像 加载 js 悬停 鼠标      更新时间：2023-09-26

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

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

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

我会从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);
});

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

相关文章：