0

ウェブページに画像があります。画像は背景ではありませんが、ページのほぼ30％を覆っています。そして、画像はウェブページ（200KB）のサイズが巨大です。したがって、画像の読み込みが完了すると、ページ上で点滅し、非常に見苦しくなります。そのため、Webページに完全にダウンロードした後、画像をフェードインさせたいと思いました。画像の背景色とウェブページの背景色は同じなので、良いアニメーションのように見えます。画像の内容だけがフェードインしているようです。どうすれば可能ですか？

4

1 に答える 1

0

このような大きな画像を使用しているため、JPG であると仮定します。また、モバイル デバイスを使用しておらず、点滅していると仮定すると、ベースライン JPG であると仮定します。うわー、それは多くの仮定です:)

プログレッシブ JPG を使用することをお勧めします。これは、大まかな形式のコンテンツとほぼ同時にロードされます。完全な品質に達するまで、段階的に自己を強化します。

同じサイズの div でラップして、コンテンツがぎくしゃくしないようにすることもできます。

フェードインしたい場合は、display:none; を追加できます。画像を作成し、ドキュメントで jquery を使用する準備ができたら、fadeIn メソッドを使用します。

img {
    height:400px;
    width:400px;
    display:none;
}​

<img id="myimg" src="http://placehold.it/400x400" >​

$(document).ready(function() {
    $('#myimg').fadeIn('fast');
});​
于 2012-12-30T22:09:16.097 に答える