Lazy loading affects the behavior of offcanvas

Hi. My english is very limited, sorry.
When I activate Lazy loading, the links that I have inside an offcanvas lose the accuracy of the displacement. It is a one page website. This is the second time this has happened to me (two out of two). I copy the offcanvas code from getbootstrap.com and enable Lazy loading in Pinegrow.
Si desactivo lazy loading todo vuelve a funcionar.
Any ideas?

There are several methods you can use to prevent reflow…

  1. Disable lazy load on the offcanvas images.
  2. Using image width and height attributes, the browser will reserve the space (although not responsive)
  3. Wrap the images in a div that preserves the aspect ratio / size of the image (responsive)
1 Like

Thanks for the quick reply. I apologize for my bad English and not knowing how to explain the problem better.

I don’t have images inside the offcanvas. Within the offcanvas I only have links to navigate along the page. Everything works fine until I enable lazy loading (LL) on one or more images. With LL disabled, the link takes me to the section I want, but when I activate LL, the first click doesn’t take me where I want; from the second click it starts working.

Exactly same principle though, As I understand it, the reflow happens if the browser doesn’t know the size of the image, that hasn’t loaded yet.

When the image loads, it shifts the content.

1 Like