Using Royalslider with Lazysizes

maros's Avatar

maros

12 Oct, 2020 09:39 AM

Hi,
would you care to create a basic example of using lazysizes with Royalslider?

I'm using
<img class="lazyload" data-src="<?php echo ($imgurl) ?>" />

Result:
The onscreen images load right away, the off-screen images become
<div style="z-index:0;" class="rsSlide "></div>
With the entire image html removed.

Ideally, the example would include preloading. The lazysizes author is meeting you half way
https://github.com/aFarkas/lazysizes/issues/81

In 2021, google and mobile-first indexing is giving us a lot of headaches. The efficient load of images has become a trend. Your plugin has been one of the main wp plugins of all time, it would be great if it leads the way. Understand that poking into lazyloading is complex, but a working example would get at least the more technical users started...

  1. 1 Posted by maros on 12 Oct, 2020 12:06 PM

    maros's Avatar

    document.addEventListener('lazybeforeunveil', function(e){
            jQuery(e.target);
                    royalslidercustom_init(e.target);
            });
    Having some success using this

    That takes care of the preload as well as images preload once initialized

  2. Support Staff 2 Posted by Dmitry Semenov on 12 Oct, 2020 02:07 PM

    Dmitry Semenov's Avatar

    Hello,

    The plugin already supports lazy-loading markup for images, for example:

    <div class="royalSlider rsDefault">
        <a class="rsImg" href="image-1.jpg">image #1</a>
        <a class="rsImg" href="image-2.jpg">image #3</a>
        <a class="rsImg" href="image-3.jpg">image #2</a>
    </div>
    

    If you have multiple sliders stacked under each other and you want to load slider only when the user scrolled to it, you'll need to implement such functionality manually.

    lazysizes has examples in the documentation on how to initialize custom components - https://github.com/aFarkas/lazysizes#js-api---events , e.g.:

    document.addEventListener('lazybeforeunveil', function(e){
        $(e.target)
            .filter('.royalSlider')
            .royalSlider({
                sliderOption: true
            })
        ;
    });
    

    ... don't forget to add classes like lazyload to the slider root element.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac