Revolution Slider - Lazyload Images for mobile

Question

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.

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.

Answer 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;
}

2. 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; }