Question

问题：
我一直在尝试在AnythingSlider的幻灯片中创建一个包含嵌入式iframe（8tracks.com播放列表）的网站。一旦页面完全加载，一切工作顺利并且嵌入iframe表现良好，它只是我有很多内容（8种不同类型的幻灯片），在某些情况下需要超过30秒才能将所有8个幻灯片加载为一个大的点击所以我想懒得加载嵌入的iframes内容，因为请求幻灯片页面，但是我无法为此目的调整图像延迟加载编码。

到目前为止：
我想我可以简单地从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

非常感谢您的帮助!! -Brad

Answer 1

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

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

无论如何，我必须组合AnythingSlider初始化代码 - 第二个与延迟加载代码被忽略，因为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);
        }

    });
});

延迟在AnythingSlider中加载嵌入的iframe内容

1 个答案: