Question

我的鼠标悬停脚本有问题。一切都按预期工作，但我有一个小问题，我不知道如何解决。更确切地说，鼠标悬停脚本会创建灰度图像悬停效果。当页面加载时，彩色图像显示的时间很短（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);
});

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

mouseover.js加载灰度图像

1 个答案: