加载时图像淡入的问题

Question

随着最近情况有所好转，我又开始着手处理我的投资组合了。它仍然很新鲜，但我可以对 jquery .load() of images 使用一些帮助。

http://progress.patrikarvidsson.com/

我正在使用带有 html5boilerplate 的 jQuery；除此之外，我还有 Masonry 和 Lightbox。我不怀疑灰度代码是罪魁祸首，所以我不会在这里包含它。下面是我的 scripts.js 文件的顶部（在灰度代码之后）。

$(window).load(function() {
    $(".thumb img").bind("load", function () { $(this).fadeIn('slow'); });

Html 看起来像这样（结构仍然遵循 html5boilerplate。JS 文件在之后，但modernizr 在之前）

<div class="block">
    <a href="titlehighres.jpg" class="thumb" title="title"><img src="img/thumbs/titleSmall.jpg" alt="" /></a>
</div>

fadeIn() 有效，但不是我想要的。首先加载图像，然后在加载文档时自动隐藏它们，然后淡入生效。如果您访问上面的链接，您可能会看到它。基本上，对我来说是这样的。

Page load
Images loads with color
jQuery hides images
jQuery fadeIn desaturated images

每次我点击刷新时都会发生这种情况。请注意，这是在 Chrome 中，淡入在 Firefox 中根本不起作用，但我还没有在我的另一台计算机上测试过。到头来还是搞不清楚是什么问题。

更新

我决定改用 css3-animation。它工作得很好，但我还没有看到它在旧浏览器中的外观。

尽管如此，我仍然很好奇为什么会出现这个问题。所以仍然鼓励回答！

Answer 1

尝试在 CSS 中隐藏彩色图像。然后它们将不会在页面加载时显示：

.img_grayscale { display: none; }

Answer 2

尝试在document.ready 上将所有图像的opacity 缩小到非常低的水平——几乎看不到，但保留它们的尺寸。

// document ready
$(function() {

    // reduce opacity
    $('.img_wrapper img').css('opacity',0.01);

    // fade in the grayscale images
    $(".img_grayscale").bind("load", function () { $(this).fadeIn('slow'); });

});

或者，只需通过 Javascript 隐藏图像 - 这样，noscript 查看器仍然可以看到您的图像，正如您在上面提到的那样。

    $('.img_wrapper img').hide();