Grow your CSS skills. Land your dream job.

AnythingSlider: load images when actual slide is behind 1

  • # May 6, 2013 at 2:45 pm

    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/

    # May 6, 2013 at 3:57 pm

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

    # May 6, 2013 at 8:05 pm

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

    # May 6, 2013 at 8:35 pm

    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.

    # May 6, 2013 at 9:01 pm

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

    # May 6, 2013 at 10:32 pm

    Yes, that part of the code is needed as well. But it is added outside of the AnythingSlider initialization code, but inside of the same document ready event.

    # May 7, 2013 at 7:56 am

    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?

    # May 7, 2013 at 9:23 pm

    Yes, use `data-src` instead of `src`, that’s why all of the images are loading.

    # May 7, 2013 at 9:40 pm

    Uhm now images aren’t loaded. :D

    http://goo.gl/G8dE1

    # May 7, 2013 at 10:29 pm

    Not sure why the first image isn’t loading… maybe just leave that first image with a `src`

    # May 7, 2013 at 10:45 pm

    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 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".