Question

最近事情已经消失，我又开始研究我的投资组合了。它仍然很新鲜，但我可以使用jquery .load（）图像的一些帮助。

http://progress.patrikarvidsson.com/

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

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

Html看起来像这样（结构仍然遵循html5boilerplate.JS文件在之后，但是现代化之前都是这样）

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

fadeIn（）有效，但不是我想要的。首先加载图像，然后在加载文档时自动隐藏它们，然后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

尝试将所有图像的opacity缩小到非常低的水平 - 几乎看不到，但保留其尺寸 - 在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隐藏图像 - 这样，noscript查看者仍然可以看到您的图像，如上所述。

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

加载时图像淡入的问题

2 个答案: