0

问题：
我一直在尝试创建一个站点，该站点在 AnySlider 的幻灯片中包含嵌入的 iframe（8tracks.com 播放列表）。页面完全加载后，一切正常，嵌入 iframe 运行良好，只是我有这么多内容（8 个不同类型的滑动面板），在某些情况下需要 30 多秒才能将所有 8 个滑动面板加载为一个大热门所以我想在请求幻灯片页面时延迟加载嵌入的 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）。

无论如何，我不得不结合 AnySlider 初始化代码——第二个带有延迟加载代码的代码被忽略了，因为 AnySlider 已经初始化了。

试试这个代码（演示）：

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 回答