AnythingSlider: load images when actual slide is behind 1

[multiformeingegno]

I was wondering if it would be possible to add the possibility to load images when they’re – for example – 1 slide behind active one. This would save bandwidth and reduce page size if many images are present in slider. :)

I thought about this loading at Galleriffic’s preloadAhead parameter:
http://www.twospy.com/galleriffic/

[Mottie]

If you look at the [home wiki page](https://github.com/CSS-Tricks/AnythingSlider/wiki#functionality) documentation for AnythingSlider under functionality, you’ll see 3 lazy-loading demos:

* [image tags](http://jsfiddle.net/Mottie/ycUB6/66/).
* [image tags & preload next image](http://jsfiddle.net/Mottie/ycUB6/67/).
* [background images](http://jsfiddle.net/Mottie/ycUB6/68/).

[multiformeingegno]

Thanks for the links. I can’t understand which part of the code I need to copy over my implementation. Should I leave the “part of the code for demo purpose”? Is it correct that I need just this..?

var loadImg = function(slider, page) {
slider.$items.eq(page).find(‘img’).each(function() {
if ($(this).attr(‘src’) === ”) {
var newsrc = $(this).attr(‘data-src’);
$(this).attr(‘src’, newsrc);

}
});
};

$(‘#slider’).anythingSlider({

// *********** 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(‘img’).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);
// trigger slide complete to preload the next slide image
slider.$el.trigger(‘slide_complete’, slider);

},

// Callback when slide initiates, before control animation
onSlideInit: function(e, slider) {
// preload the targeted page image
loadImg(slider, slider.targetPage);
},
// Callback when slide initiates, before control animation
onSlideComplete: function(slider) {
// *** PRELOAD THE NEXT SLIDE IMAGE ***
loadImg(slider, slider.currentPage + 1);
}

});

Thanks as always :)

[Mottie]

Yes, you just needed to remove the “for demo only” stuff…

In the above, just copy the three parts from inside the code: `onInitialized`, `onSlideInit` and `onSlideComplete` into your existing code. Also make sure to add commas appropriately. If you have problems, just paste your code here, or in a fiddle.

[multiformeingegno]

Ok. But also var loadImg is needed, isn’t it?
Tomorrow I’ll update my website and will let you know how it went. :-)

[multiformeingegno]

Hi Mottie, I updated my AnythingSlider. You can see it live here: http://goo.gl/G8dE1 Is is ok?
Testing with Pingdom Tools it loads all slides from the start nevertheless..: http://tools.pingdom.com/fpt/#!/KYGf9Cu7x/http://lorenzoraffio.com/

Demo has “data-src” instead of “src”. Should I replace my “src” with that?

[multiformeingegno]

Uhm now images aren’t loaded. :D
http://goo.gl/G8dE1

[multiformeingegno]

Yep, it’s working properly now with first image as src and others as data-src.
Maybe this could be implemented in a parameter so it would be easier to use. :-)

[Author]

Posts