Lazy Loading

  • Resolved meggsico

    (@meggsico)


    1 year, 8 months ago

    Hi David
    I have configured my sliders with the “Lazy loading” option. I also use thumbnails. With the option “Lazy loading” you always see a white area on the right side of the thumbnails on which the thumbnail is built. This white area bothers me, because you don’t see this behavior in the images, despite lazy loading. If I disable the lazy loading option, the white area is no longer present in the thumbnails, but you can always see the last image of the slider flash up briefly when refreshing the website with the slider (in the video this is a green landscape image) and then the first image of the slider appears. But that bothers me too :-).

    I am of the opinion that lazy loading is not absolutely necessary for thumbnails. Is there any way I can switch it off for thumbnails? Perhaps with a separate option in the configuration, which would have to be added or I can built a plugin (hook) ?
    if necessary, you could possibly hide the image (green landscape image) with a css code, but i think lazy loading for the images is a good option and i would like to keep it if possible.

    You can find the video here.

    Many thanks for your help

    Greetings, Meggs

    • This topic was modified 1 year, 8 months ago by meggsico.
Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author bqworks

    (@bqworks)

    1 year, 8 months ago

    Hi Meggs,

    The thumbnail images start loading only after the scroll animation completes, which causes the temporary blank area. You could add some custom JavaScript that replaces the thumbnail placeholders with the actual image before they come into view:

    jQuery('.sp-thumbnail').each((index, el) => {
    jQuery(el).attr('src', jQuery(el).attr('data-src'))
})

    Best,
    David

    Thread Starter meggsico

    (@meggsico)

    1 year, 8 months ago

    Hi David

    The white rectangle is no longer visible, but you can see how the image is constructed. See my Video. Is there any way to specify the size?

    In addition, when refreshing, I now always see the last image flash out briefly before the first image is loaded. I have shown you the behavior in the video (green landscape) above. Now it’s done by the jquery code. Lazy loading is enabled.

    One more thing. Where do I put the script? I have now installed a plugin script n styles. Is there an other way?

    Thank you for your response

    Greetings, Markus

    • This reply was modified 1 year, 8 months ago by meggsico.
    Plugin Author bqworks

    (@bqworks)

    1 year, 7 months ago

    Hi, Markus. You can use custom CSS to further improve the styling. For example, if your thumbnail have the same size, you can use something like this:

    .sp-thumbnail {
    width: 100px;
    height: 80px;
}

    For the last slide image, you could use this:

    .sp-layer:not([style]) {
	opacity: 0
}

    You can use other plugins that allow you to insert custom CSS/JS. The slider also provides this functionality as premium add-on.

    Best,
    David

    Plugin Author bqworks

    (@bqworks)

    1 year, 7 months ago

    The code to hide the unstyled images is actually:

    .sp-image:not([style]) {
	opacity: 0
}

    Best,
    David

    Thread Starter meggsico

    (@meggsico)

    1 year, 7 months ago

    Hi David

    Everything works fine. Thank you very much for your great support.

    One thing I noticed is that if you set the fade duration greater than 0, the image moves briefly to the left and right. If you set the fade duration to 0, the picture no longer wobbles. See my video
    Is there any way to fix this?

    This is not so important to me now, although the slider looks even more professional with fade duration greater 0 :-).

    I have summarized the steps again for the community:

    CSS-Styles:

    .sp-thumbnail {
     width: 100px !important;
     height: 80px !important;
}
.sp-image:not([style]) {
     opacity: 0 !important;
}
.sp-layer:not([style]) {
    opacity: 0 !important;
}

    jQuery-script:

    jQuery(document).ready(() => {
       jQuery('.sp-thumbnail').each((index, el) => {
       jQuery(el).attr('src', jQuery(el).attr('data-src'));
       });
});

    Thank you again for your patience and great support.

    Greetings, Meggs

    Plugin Author bqworks

    (@bqworks)

    1 year, 7 months ago

    Hi, Meggs. I noticed the slide movement during the fade. I will try to investigate it soon.

    Best,
    David

    Plugin Author bqworks

    (@bqworks)

    1 year, 7 months ago

    I did a few more tests and I could notice the movement only when the page is zoomed in, which I often use. If the zoom level is at 100%, it didn’t occur. I might occur at some zoom levels which cause the position and size of the elements to have decimal values instead of integers.

    Best,
    David

    Thread Starter meggsico

    (@meggsico)

    1 year, 7 months ago

    Hi David,

    I understand the problem. I now assume that you can’t fix this

    Greetings, Meggs

    Plugin Author bqworks

    (@bqworks)

    1 year, 7 months ago

    Hi, Meggs. My first impression is that it would be difficult given the internal workings of the slider. That movement is perceivable when the slider changes the layout of the slides from a stack, needed for the fade effect, to a carousel, needed for the touch-swipe navigation. Although the position of the visible slide should be 0 in both cases, its actual position differs slightly, possibly because the two different kinds of layout are achieved using different CSS properties: top, left in one case and the transform:translate in the other.

    Best,
    David

    Thread Starter meggsico

    (@meggsico)

    1 year, 7 months ago

    Hi David

    I understand. Thx for your support an for your great plugin.

    Greetings, Meggs

    Plugin Author bqworks

    (@bqworks)

    1 year, 7 months ago

    You’re welcome, Meggs!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Lazy Loading’ is closed to new replies.