1

ページが読み込まれるときにいくつかの画像を Web ページにフェードインさせたいので、画像読み込みスクリプトを使用して opacity:0 から opacity:1 にフェードインします。

ただし、スクリプトを機能させるには、最初は画像を非表示にする必要があります。したがって、CSS を使用して不透明度をゼロに設定すると、ユーザーが JavaScript を持っていない場合、画像は表示されません。

これに対抗するために、このようにjQueryを介してゼロ不透明度を適用しようとしました...

 $(".images").css('opacity', 0);

...ただし、100% の不透明度でも画像のちらつきが発生し、jQuery が起動して非表示になり、画像読み込みスクリプトで再びフェードインするだけです。

画像が読み込まれる前に最初に画像を非表示にする最も安全な方法は何ですか?

前もって感謝します

4

2 に答える 2

1

"image-loading-script" 別名 js 経由でロードしている場合は、次のようにすることができます。

var img = $(document.createElement('img'));
img.on('load.fade-image', function () {
  // Note: set opacity of the image before adding it to the DOM, this way it will be rendered with 0 opecity
  img.css('opacity', 0);
  img.appendTo('body');
});
img.attr('src', 'http://some-url');
于 2013-10-12T23:39:28.180 に答える
1

あなたがいたるところにいるので、これが私の最後の試みです：

<noscript>
<style type="text/css">
.images {
opacity:1;
}
</style>
</noscript>

スタイルシートで：

.images {
opacity: 0;
}

jquery で:

$('.images').fadeIn();

誰かが JavaScript を持っていない場合、noscript タグにヒットし、画像の不透明度を 1 に戻します。

于 2013-10-12T22:50:14.077 に答える