0

由于最近情况有所好转，我再次开始研究我的投资组合。它仍然很新鲜，但我可以对图像的 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 文件在之后，但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。它工作得很好，但我还没有看到它在旧浏览器中的外观。

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

4

2 回答 2

1

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

.img_grayscale { display: none; }
于 2011-11-25T11:23:25.407 回答
0

尝试将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();
于 2011-11-25T12:09:02.967 回答