Lazy loaded images

When you insert images in the page using the </img> tag, all the images will load when the page loads. Sometimes you want an image to load only when you navigate to the slide that contains it. This will speed up the initial load of the page, and it's especially useful if you have a slider that contains many images. In order to achieve this functionality for the slider, you will have to specify the image using a data attribute instead of using the </img> tag. The data attribute is "data-image" and must be added to the </li> tag, as you can see in the example below.

<div class="advanced-slider" id="my-slider">
    <div class="slides">
        
        <div class="slide" data-image="../images/slides/image1.jpg">
            <img class="thumbnail" src="../images/thumbnails/image1.jpg"/>
            <div class="caption">Simple caption for the first slide.</div>
        </div>
        
        <div class="slide" data-image="../images/slides/image2.jpg">
            <img class="thumbnail" src="../images/thumbnails/image2.jpg"/>
            <div class="caption">Some text for the second slide.</div>
        </div>
    
	<div class="slide" data-image="../images/slides/image3.jpg">
            <img class="thumbnail" src="../images/thumbnails/image3.jpg"/>
            <div class="caption">Yet another captions.</div>
        </div>

    </div>
</div>
David -
Have more questions? Submit a request

4 Comments

Date Votes
  • 0
    Avatar
    Russ Jones

    On the older versions, I noticed that when I had all of the images set up for "lazy loading", that on very rare occasions (depending on the browser / size of the file and no image caching, etc) that it would start off before the first image was properly sized and positioned (very rare). Now I see in the notes that you have some new preload code (thanks!).

    As I'm now reconfiguring it with the new version 4.5 code, I couldn't help wondering if I'm using the "lazy loading" configuration correctly.

    For the first one or two image files, should I not set it up for lazy-loading (XML) and just assign lazy loading to the later images? Or does the lazy loading code already take that into account.  I.E. Should I leave all of the large images in the XML file set up for lazy loading (rather than "mixing and matching"...?

     

     

     

  • 0
    Avatar
    David

    Hi Russ,

    Good question. Since the first image, and the second one if you use preloadNearbyImages, will load as soon as the slider loads, you could skip using lazy loading for those images. However, the slider will handle it fine even if you set them to lazy load.

    Regards,
    David

  • 0
    Avatar
    Russ Jones

    I'm glad to hear that it already handles it (with the preloadNearbyImages selection.

    Excellent support (and product) as always! Thank-you!

  • 0
    Avatar
    David

    You're welcome! :)

Article is closed for comments.
Powered by Zendesk