Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript AnythingSlider: load images when actual slide is behind 1 Re: AnythingSlider: load images when actual slide is behind 1

#134299

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 :)