Revolution Slider – Lazyload Images for mobile

3 Views

Problem: Images become blurry when document width is shrunk because they are too large.

Im trying to lazyload a specific image when the window width is at a value that I have specified. The images are 2560px wide by default.

Read More

I am using the latest Revolution Slider and the latest WordPress version. Images are in .jpg format as they are the smallest. Images MUST be Lazy-loaded because there are 4 different sets of media queries.

The slider has 6 slides and each need an additional 3 or 4 images that will be swapped out depending on the size of the window.

I have read the Slider Revolution Docs but there is no example for my current situation and does not include enough of a technical explanation for me to get an idea of where to start.

My thinking:
Load the images using the built in Lazy load function with the ‘data-lazyload’ attribute, but how would i load multiple images in a single attribute?

Any help would be greatly appreciated.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. You could use lazySizes with either this partial picture/srcset polyfill or in combination with either picturefill or respimage.

    And then write the following markup:

    <!-- picture with one implicit density descriptor per srcset -->
<picture>
    <!--[if IE 9]><video hidden=""><![endif]-->
    <source
        data-srcset="http://placehold.it/500x600/11e87f/fff"
        media="(max-width: 480px)" />
    <source
        data-srcset="http://placehold.it/700x300"
        media="(max-width: 700px)" />
    <source
        data-srcset="http://placehold.it/1400x600/e8117f/fff"
        media="(max-width: 1400px)" />
    <source
            data-srcset="http://placehold.it/1800x900/117fe8/fff" />
    <!--[if IE 9]></video(max-width: 1400px)><![endif]-->
    <img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        class="lazyload"
        alt="image with artdirection" />
</picture>

    You can also add effects in two ways either a JS animation using the lazybeforeunveil event in conjunction with the browsers load event or using a CSS transition/CSS animation using the classes lazyload, lazyloading and lazyloaded.

    Here are two examples:
    1. Simple fadin after load

    .lazyload,
.lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}

    1. fadein while load with spinner (much preferred, if you want to support progressive jpgs or LQIP:

      .lazyload {
      opacity: 0;
      }
      .lazyloading {
      opacity: 1;
      transition: opacity 300ms;
      background: #f7f7f7 url(loader.gif) no-repeat center;
      }