在任何滑块中延迟加载嵌入的 iframe 内容

Question

问题：
我一直在尝试创建一个网站，在 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)，如果有帮助，请从我的 Dropbox 链接。 http://dl.dropbox.com/u/23417244/AnythingSlider.zip

非常感谢您的帮助！！ -布拉德

Answer 1

此演示设置方式的主要问题是它加载了当前显示的幻灯片和克隆的幻灯片。因此，如果用户在第一张幻灯片上，它将总共加载 12 个 iframe。如果它们从任何其他页面开始，它将额外加载 7-8 个 iframe。

因此，最简单的解决方案是设置infiniteSlides 选项或将滑块设置为使用mode: 'fade'。这些解决方案中的任何一个都不会在滑块中包含克隆的幻灯片面板，因此滑块只会加载 iframe 的当前页面（5-8 个 iframe）。

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

试试这个代码 (demo)：

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);
        }

    });
});