Question

The Problem:

I’ve been trying to create a site that houses embeded iframes (8tracks.com playlists) in the slides in AnythingSlider. Everything works smoothly and behaves fine with the embeded iframes once the page is fully loaded, its just I have so much content (8 different genre slide panels) that it takes over 30 secs in some cases to load all 8 slide panels as one big hit so I’d like to lazy load the embeded iframes content as the slide pages are requested but I’m having trouble adapting the image lazy load coding for this purpose.

Attempted Thus Far:

I figured I could simply swap the img tag reference from the AnythingSlider documented lazy load coding for images with that of an iframe and since they are both just references to an src it would work, but this has thus far proven to not be the case. The code below enables lazy loading for images within the gallery, however switching it to iframe has not worked so far:

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

});

If you could even help point me in the right direction for this I would be very appreciative as this is pretty much the last little issue I have left to yet resolve within the overall site.

Here is the page’s framework with all needed components as a zip packet (200kb) linked from my dropbox if it helps..
http://dl.dropbox.com/u/23417244/AnythingSlider.zip

Thanks so much for the assistance!!
-Brad

Answer 1

The main issue with the way this demo is set up is that it loads the currently displayed slide and the cloned slides. So if the user is on the first slide, it will load a total of 12 iframes. If they start on any other page, it will load an additional 7-8 iframes.

So the easiest solution would be to either set the infiniteSlides option or set the slider to use mode: 'fade'. Either of these solutions will not include cloned slide panels in the slider and thus the slider will only load the current page of iframes (5-8 iframes).

Anyway, I had to combine the AnythingSlider initialization codes – the second one with the lazy loading code was ignored because AnythingSlider was already initialized.

Try this code (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);
        }

    });
});