Lazy Loading

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

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 5 months, 3 weeks ago by meggsico.

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

The code to hide the unstyled images is actually:

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

Best,
David

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

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

Best,
David

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

Hi David,

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

Greetings, Meggs

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

Hi David

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

Greetings, Meggs

You’re welcome, Meggs!