Canvas Support

Flexslider Wraparound with Lazy Loading

10 replies · opened Mar 25, 2023

PpardthemonsterMar 25, 2023

There seems to be a delay during thumbnail wraparound (when it starts back at first) on a flexslider with lazy loading. I have been able to reproduce in portfolio.html by replacing the "Morning Dew" code below:

[
![attachment](images/portfolio/4/4.jpg)
](portfolio-single-gallery.html)
[
![attachment](images/portfolio/4/4-1.jpg)
](portfolio-single-gallery.html)

with this:

[
![attachment](images/portfolio/4/4.jpg)
](portfolio-single-gallery.html)
[
![attachment](images/portfolio/4/4-1.jpg)
](portfolio-single-gallery.html)

This issue is relative to my link shown below and was not present in v6 (https://www.aaronbonine.com/v6/portfolio-birds.html), but probably easier to troubleshoot without all the other scripts on my page.

SSemicolon WebSTAFFMar 25, 2023

Hello,

We have checked both URLs and it appears to be almost similar to us. If this is related to Async JS Loading, you can consider using the updates JS Loading Techniques with the Latest Update.

Simply replace the existing code:
[ch_pre][/ch_pre]

with this:
[ch_pre]
[/ch_pre]

This should fix most of the delayed loading issues and runs all the Plugins at once.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpardthemonsterMar 25, 2023

Not sure this is the issue. I have tried above new code with new 7.0.4, but no resolution. I have made a test page to better show what I am experiancing:

https://www.aaronbonine.com/portfolio-birds-lazy-test.html

First flexslider item has no lazy, second flexslider item has lazy and delay after second image when it goes back to first.

SSemicolon WebSTAFFMar 26, 2023

Hello,

The Page here: https://www.aaronbonine.com/portfolio-birds-lazy-test.html still uses the Old Codes. Make sure that you change the js/functions.js to js/plugins.js File and test the Page again.

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

PpardthemonsterMar 26, 2023

Code changed to as you noted, no change.

SSemicolon WebSTAFFMar 27, 2023

Hello,

Consider adding this JS Code at the bottom of the Page:
[ch_pre type="js"]jQuery(window).on( 'lazyLoadLoaded', function(){
if( elLazy.length == element.find('.lazy.lazy-loaded').length ) {
lazyLoadInstance.update();
setTimeout(() => {
element.find('.flexslider .slide').resize();
}, 500 );
}
});[/ch_pre]

Let us know if this fixes the issue. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

PpardthemonsterMar 27, 2023

Thanks, but this is not resolving yet, instead throwing an error, "Can't find variable: elLazy"

SSemicolon WebSTAFFMar 27, 2023

Hello,

Apologies. Consider trying this code:
[ch_pre type="js"]jQuery(window).on( 'lazyLoadLoaded', function(){
setTimeout(() => {
jQuery('.flexslider .slide').resize();
}, 500 );
});[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpardthemonsterMar 27, 2023

That did not resolve either. Just so we are clear, I have attached a video showing the issue with the second item as it wraps around to first.

Please note that this is also relevant if applying lazy loading to portfolio.html flexslider.

PpardthemonsterMar 31, 2023

I was able to solve this by adding the following:

or changing functions.js to plugins.js.

Please consider SOLVED. Thanks for all help.

SSemicolon WebSTAFFApr 1, 2023

Hello,

Glad the issue was resolved. We will make a note of this and run more tests to make the execution of JS better.

Please do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard