Canvas Support

Flexslider Wraparound with Lazy Loading

10 replies·opened Mar 25, 2023
P
pardthemonsterMar 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:

<div class="slide"><a href="portfolio-single-gallery.html"><img src="images/portfolio/4/4.jpg" alt="Morning Dew"></a></div>
<div class="slide"><a href="portfolio-single-gallery.html"><img src="images/portfolio/4/4-1.jpg" alt="Morning Dew"></a></div>

with this:

<div class="slide"><a href="portfolio-single-gallery.html"><img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="images/portfolio/4/4.jpg" alt="Morning Dew"></a></div>
<div class="slide"><a href="portfolio-single-gallery.html"><img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="images/portfolio/4/4-1.jpg" alt="Morning Dew"></a></div>

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.

S
SemiColonWebSTAFFMar 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:

<script src="js/functions.js"></script>

with this:

<script src="js/jquery.js"></script>
<script src="js/plugins.js"></script>

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.

P
pardthemonsterMar 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.

S
SemiColonWebSTAFFMar 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.

P
pardthemonsterMar 26, 2023

Code changed to as you noted, no change.

S
SemiColonWebSTAFFMar 27, 2023

Hello,

Consider adding this JS Code at the bottom of the Page:

jQuery(window).on( 'lazyLoadLoaded', function(){
	if( elLazy.length == element.find('.lazy.lazy-loaded').length ) {
		lazyLoadInstance.update();
		setTimeout(() => {
			element.find('.flexslider .slide').resize();
		}, 500 );
	}
});

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.

P
pardthemonsterMar 27, 2023

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

S
SemiColonWebSTAFFMar 27, 2023

Hello,

Apologies. Consider trying this code:

jQuery(window).on( 'lazyLoadLoaded', function(){
	setTimeout(() => {
		jQuery('.flexslider .slide').resize();
	}, 500 );
});

Hope this Helps!

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

P
pardthemonsterMar 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.

P
pardthemonsterMar 31, 2023

I was able to solve this by adding the following:

<script src="js/plugins.flexslider.js" id="canvas-flexslider-js"></script>
<script src="js/fn.flexslider.js" id="canvas-flexslider-fn"></script>

or changing functions.js to plugins.js.

Please consider SOLVED. Thanks for all help.

S
SemiColonWebSTAFFApr 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