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

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #44591

    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:


    If you look at the [home wiki page]( documentation for AnythingSlider under functionality, you’ll see 3 lazy-loading demos:

    * [image tags](
    * [image tags & preload next image](
    * [background images](


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



    // *********** 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) {
    loadImg(slider, slider.currentPage + 1);


    Thanks as always :)


    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.


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


    Hi Mottie, I updated my AnythingSlider. You can see it live here: Is is ok?
    Testing with Pingdom Tools it loads all slides from the start nevertheless..:!/KYGf9Cu7x/

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


    Uhm now images aren’t loaded. :D


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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.