1

サムネイルを使用して、クリックするとメインステージに大きな画像をロードするシンプルな画像スライドショーローダーを作成しました。「リール」プラグインを使用して、メインステージにパノラマの回転可能な「3D」画像を作成しています。

それは楽しいです、そしてすべてがウェブキットでうまく機能します。あなたはここでライブページを見ることができます：

http://bit.ly/Rv9ks3

これのスライドショーの側面は、ネストされたコールバックを使用して行われます。静的なサムネイルリンクのいずれかをクリックします。

a）現在の既存の回転可能な画像をフェードアウトします

b）fadeOut（）へのコールバックとして、リールプラグインが画像から削除され、すべてのイベントが画像からバインド解除され、適切な測定のために再び非表示になり、imgsrcが新しいsrcと交換されます。

c）次に、Descandroのimagesloadedプラグインを使用して、imgの新しいsrcがダウンロードされたことをテストすると、メイン画像がフェードインされます。

d）そのフェードインへのコールバックとして、Reelプラグインが新しいイメージで呼び出されます。

問題は次のとおりです。Firefoxでは、以前の古い画像がまだステージ上にある状態でフェードインが発生しています。これは、古いsrcが一時的に「固定」されているかのようです。これは、コールバックスクリプトを順番に実行する必要があるため、奇妙なことです。その後、しばらくすると、画像が突然新しい画像に更新されます。ですから、すべてが機能しますが、スムーズな移行を目指していると、ぎくしゃくします。

注：すべての画像がキャッシュされると、すべてが完全に機能します。したがって、これを少し試した後、動作を再現するためにFirefoxのキャッシュをクリアする必要があるかもしれません。

関連するコードは次のとおりです。

$(document).ready(function () {
    $('#the-image-to-rotate').reel(); //runs the plugin
    $('#the-image-to-rotate').on('loaded', function(){  // the plugin's 'loaded' event
        $(this).data('velocity', 4); // kick off an initial velocity
    });

    $('#engraved-vase-pager a').on("click", function(event) {
        event.preventDefault();

    //build the URLS for the new img and the plug-in
        var newRelativeUrl = $(this).children('img').attr('src').slice(0,-9);
        var firstImageUrl = newRelativeUrl + "01.jpg";
        var templateUrl =  newRelativeUrl + "##.jpg";

        $('#the-image-to-rotate').fadeOut(400, function() {
            $(this).unreel()     // tear down the plugin
                   .unbind()      // remove anything lingering
                   .hide()      // hide the de-plugin'ed img
                   .attr('src', firstImageUrl);     //swap out with the new src

             $(this).imagesLoaded(function($images, $proper, $broken) {
                $(this).fadeIn(400, function() {
                    $(this).reel({
                        images:     templateUrl,
                    });
                    $(this).on('loaded', function(){
                        $(this).data('velocity', imageVelocity);
                    });
                });
            });
        });
});

Firebugは、以前に表示されていない画像の読み込み時に「画像が破損または切り捨てられた」と言いますが、グリッチを除いてすべてが正常に機能しているため、メッセージは実際には説明的ではありません。私の徹底的なログで、imagesloadedが壊れた画像をゼロに示していることがわかります。

これは私を木の上に追いやっています。洞察を事前に感謝します！

4

1 に答える 1

0

ここでのPreliのコメントに触発されて、私は、何らかの理由でimgの新しい実際のsrcを設定する前に、最初にsrcを空の文字列（ ""）に設定すると、Firefoxが注目を集め、負荷設定をリセットして、コールバックが行われることを発見しました。正しく発砲できます。理由はわかりませんが、これでうまくいきます。これが誰かに役立つことを願っています。

于 2012-08-30T22:15:14.087 に答える