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 を介して画像を非表示にするだけです。そのようにすると、上記のように、スクリプトのないビューアーでも画像を見ることができます。

    $('.img_wrapper img').hide();
于 2011-11-25T12:09:02.967 に答える