The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:

    # May 6, 2013 at 3:57 pm

    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](

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



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

    # 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

    This reply has been reported for inappropriate content.

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

    # May 7, 2013 at 9:23 pm

    This reply has been reported for inappropriate content.

    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

    # May 7, 2013 at 10:29 pm

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed