加载时图像淡入的问题

Question

随着最近情况变得明朗，我再次开始处理我的投资组合。它仍然很新鲜，但我可以使用图像的 jquery .load() 的一些帮助。

http://progress.patrikarvidsson.com/

我正在使用 jQuery 和 html5boilerplate；除此之外，我还有 Masonry 和 Lightbox。我不怀疑灰度代码是罪魁祸首，所以我不会将其包含在这里。下面是我的 script.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 中，fadein 在 Firefox 中根本不起作用，但我还没有在我的另一台计算机上测试过。到最后我也想不出问题出在哪里。

更新

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

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

Answer 1

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

.img_grayscale { display: none; }

Answer 2

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

// 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 隐藏图像 - 这样，无脚本查看器仍然可以看到您的图像，正如您上面提到的那样。

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