3

これを使用して、画像の読み込みを遅らせています:

HTML:

<img src="loading.gif" delayedSrc="url/to/real/image.png" />

jquery:

image.attr('src', currentImage.attr('delayedSrc'));

フェードインしたい場合は、loading.gif から実際の画像に切り替えるだけでなく、読み込みが完了したときに、次のことを試しました。

image.attr('src', currentImage.attr('delayedSrc')).load(function() {
    image.hide().fadeIn(1000);
}

画像がまだキャッシュされていない場合、これは正常に機能します (iamge ショーをロードすると、実際の画像がフェードインします)。ただし、問題は、画像が既にキャッシュされている場合、ページの読み込み時に表示され (読み込み中の画像は表示されません)、非表示になり、再びフェードインされて、かなり醜いように見えることです..

どうすればこれを解決できますか? 私の考えは、画像がキャッシュされているかどうかを確認し、キャッシュされていない場合にのみフェードインを実行することでした...結局のところ、読み込み中の画像と実際の画像の間の移行をよりソフトにするためにフェードが必要なだけです。しかし、どうすればこれを確認できますか？またはより良い解決策はありますか？

4

1 に答える 1

0

1 つの画像のみを使用して、ある画像から別の画像にフェードすることはできません。その効果が問題のないビジュアルである場合、1 つの画像を不透明度 0 から完全な不透明度までフェードできます。

例を次に示します: http://jsfiddle.net/jfriend00/38Afs/

HTML:

<img class="delayImg" delayedSrc="http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg" />​

CSS:

.delayImg {opacity:0;}​

Javascript:

$(document).ready(function() {
    $(".delayImg").each(function() {
        this.onload = function() {
            $(this).animate({opacity: 1}, 2000);
        };
        this.src = this.getAttribute("delayedSrc");
    });
});​

注:onloadを変更すると、すべてのブラウザで確実に起動するとは限りません。.src最初に設定したときのみです。そのため、最初の画像.srcを設定して後で変更し、新しい画像がロードされたときに通知を受けるのは問題です。本当にその効果が必要な場合は、最初の画像に背景画像を使用するか、2 つの画像オブジェクトを重ねて使用して、最初の画像をフェードアウトし、2 番目の画像をフェードインする必要があります。

2 番目のイメージを作成する例を次に示します。これにより、1 つをフェードアウトし、もう 1 つをロードするとすぐにフェードインできます: http://jsfiddle.net/jfriend00/yvc8d/。

そして、これは後でユーザーのアクションでフェードするものです: http://jsfiddle.net/jfriend00/LRRRm/。

于 2012-09-06T15:49:52.907 に答える