0

問題:
AnythingSlider のスライドに埋め込まれた iframe (8tracks.com プレイリスト) を格納するサイトを作成しようとしています。ページが完全に読み込まれると、すべてがスムーズに機能し、埋め込まれた iframe で正常に動作します。コンテンツが多すぎて (8 つの異なるジャンルのスライド パネル)、場合によっては 8 つのスライド パネルすべてを 1 つの大きなヒットとして読み込むのに 30 秒以上かかることがあります。スライドページが要求されたときに埋め込まれたiframeコンテンツを遅延ロードしたいのですが、この目的のために画像の遅延ロードコーディングを適応させるのに問題があります。

これまでの試み:
AnythingSlider 文書化された画像の遅延ロード コーディングからの img タグ参照を iframe の参照と簡単に交換できると考えました。どちらも src への単なる参照であるため、機能しますが、これはこれまでのところそうではないことが証明されています場合があります。以下のコードは、ギャラリー内の画像の遅延読み込みを有効にしますが、iframe への切り替えは今のところ機能していません。

// This part of the code is
// for demo purposes only
// *************************
    var message = function(file, p, l) {
    var txt = l ? '<i>loading #' + p + '</i>' : '<b>preventing load #' + p + '</b>';
    // show loading message
    $('.message').append('<li>' + txt + ': ' + file + '</li>').find('li:first').remove();
};
// The code above is for this demo only
// *************************

// load image
var loadImg = function(slider, page) {
    slider.$items.eq(page).find('iframe').each(function() {
        if ($(this).attr('src') === '') {
            var newsrc = $(this).attr('data-src');
            $(this).attr('src', newsrc);

            // update loading message
            message(newsrc, page, true); // *** for demo only ***
        }
    });
};

$('#slider').anythingSlider({

resizeContents: false,

// *********** Callbacks ***********
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {
    var start = slider.options.startPanel;
    // allow start & cloned panel images to load
    // the rest get the src removed.
    slider.$items.eq(start).siblings(':not(.cloned)').find('iframe').each(function() {
        var $el = $(this);
        $el.attr('src', function(i, src) {
            if (src !== '') {
                $el.attr('data-src', src);

                // update loading message
                message(src, i + 1, false); // *** for demo only ***
            }
            return '';
        });
    });
    // load current image
    loadImg(slider, slider.currentPage);
    // load first cloned slide #0
    loadImg(slider, 0);
    // load last cloned slide #6
    loadImg(slider, slider.pages+1);
},

// Callback when slide initiates, before control animation
onSlideInit: function(e, slider) {
    // preload the targeted page image
    loadImg(slider, slider.targetPage);
}

});

これは、サイト全体でまだ解決していない最後の小さな問題であるため、私を正しい方向に向けるのを助けることができれば、非常に感謝しています.

これは、必要なすべてのコンポーネントを zip パケット (200kb) として含むページのフレームワークで、役立つ場合はドロップボックスからリンクされています.. http://dl.dropbox.com/u/23417244/AnythingSlider.zip

助けてくれてどうもありがとう!! -ブラッド

4

1 に答える 1

0

このデモの設定方法に関する主な問題は、現在表示されているスライドと複製されたスライドをロードすることです。したがって、ユーザーが最初のスライドを使用している場合は、合計12個のiframeが読み込まれます。他のページから開始すると、追加の7〜8個のiframeが読み込まれます。

したがって、最も簡単な解決策は、infiniteSlidesオプションを設定するか、スライダーを使用するように設定することmode: 'fade'です。これらのソリューションのいずれも、スライダーに複製されたスライドパネルを含まないため、スライダーはiframeの現在のページ（5〜8 iframe）のみをロードします。

とにかく、AnythingSlider初期化コードを組み合わせる必要がありました。AnythingSliderはすでに初期化されているため、2番目のコードと遅延読み込みコードは無視されました。

このコードを試してください（デモ）：

jQuery(function($){
    // This part of the code is
    // for demo purposes only
    // *************************
    var message = function(file, p, l) {
        var txt = l ? '<i>loading #' + p + '</i>' : '<b>preventing load #' + p + '</b>';
        // show loading message
        $('.message').append('<li>' + txt + ': ' + file + '</li>').find('li:first').remove();
    };
    // The code above is for this demo only
    // *************************

    // load image
    var loadImg = function(slider, page) {
        console.debug('iframe? ' + slider.$items.eq(page).find('iframe').length);
        slider.$items.eq(page).find('iframe').each(function() {
            if ($(this).attr('src') === '') {
                var newsrc = $(this).attr('data-src');
                $(this).attr('src', newsrc);
                // update loading message
                message(newsrc, page, true); // *** for demo only ***
            }
        });
    };

    $('#slider').find('iframe').each(function() {
        var $el = $(this);
        $el.attr('src', function(i, src) {
            if (src !== '') {
                $el.attr('data-src', src);
                // update loading message
                message(src, i + 1, false); // *** for demo only ***
            }
            return '';
        });
    });

    $('#slider').anythingSlider({

        resizeContents: false,
        buildStartStop      : false,
        navigationFormatter : function(index, panel){ // Format navigation labels with text
            return ['Featured', 'Hip Hop', 'Dubstep', 'D&B', 'Midnight Trip', 'Dance Party', 'Chillin Beats', 'Sexy'][index - 1];
        },

        // *********** Callbacks ***********
        // Callback when the plugin finished initializing
        onInitialized: function(e, slider) {
            // load current image
            loadImg(slider, slider.currentPage);
            // load first cloned slide #0
            loadImg(slider, 0);
            // load last cloned slide #6
            loadImg(slider, slider.pages+1);
        },

        // Callback when slide initiates, before control animation
        onSlideInit: function(e, slider) {
            // preload the targeted page image
            loadImg(slider, slider.targetPage);
        }

    });
});
于 2012-07-27T20:04:22.873 に答える