图像在加载时衰落问题

最近事情已经清理完毕，我开始重新研究我的投资组合。它仍然非常新鲜，但我可以使用图像的jquery .load（）的一些帮助。图像在加载时衰落问题

http://progress.patrikarvidsson.com/

我使用jQuery与html5boilerplate;在此之上我有砌体和灯箱。我不怀疑灰度的东西的代码是罪魁祸首，所以我不会在这里包括它。下面是我的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>

的淡入（）的作品，而不是我所想要的。首先加载图像，然后在加载文档时自动隐藏图像，然后淡入生效。如果您访问上面的链接，您可能会看到它。基本上，对我来说，它看起来像这样。

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

每次刷新时都会发生这种情况。请注意，这是在Chrome中，fadein在Firefox中完全不起作用，但我还没有在我的其他计算机上测试过。最后，我无法弄清楚问题所在。

更新

我已经决定使用CSS3动画代替。它工作得很好，但我还没有看到它在旧版浏览器中的样子。

虽然，我仍然对这个问题发生的原因感到好奇。所以答案仍然是鼓励！

来源

2011-11-25 arvdsn

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

.img_grayscale { display: none; }

来源

2011-11-25 11:23:25

不幸的是，这并没有解决在jQuery想淡化它们之前加载彩色图像。它也使悬停功能无法使用。如果可以，我宁愿不使用css来隐藏元素，因为我希望没有javascript的查看器也能够看到投资组合。 – arvdsn

尝试降低所有图像的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的图像 - 这样一来，无脚本的观众仍然可以看到你的形象，你上面提到。

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

来源

2011-11-25 12:09:02

图像在加载时衰落问题

回答

相关问题