圖像在加載時衰落問題

最近事情已經清理完畢，我開始重新研究我的投資組合。它仍然非常新鮮，但我可以使用圖像的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

它在渲染和顯示後仍然隱藏圖像。與不透明度一樣，它發生在 - 即使在文件準備好之後。 – arvdsn

圖像在加載時衰落問題

回答

相關問題