search

aFarkas / lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
MIT License
17.54k stars 1.73k forks source link

Sometimes wrong size is chosen on bgset #749

Open simplenotezy opened 4 years ago

simplenotezy commented 4 years ago

Describe the bug Sometimes it chooses the wrong size for the bgset. See image:

image

In what environment (browser/device etc.) does this bug happen/not happen: Tested in latest version of Chrome on MacOS.

It only happen sometimes. The images is inside a Siema image slider, and is shown on conditions. Not sure if this has something to do with it.

simplenotezy commented 4 years ago

This is a work-around. Whenever a product is added, that is dynamic, I run this:

        setTimeout(() => {
            const images = document.querySelectorAll('.image-gallery .product-image');
            for (let i = 0; i < images.length; i++) {
                images[i].classList.add('lazyload');
            }
        }, 300);

That will force lazyload to trigger again.

I'd love if there was a more manual way to watch elements. The .init() way doesn't work, since you can't "uninit" / destroy, and it's not a direct API meant for this.

simplenotezy commented 4 years ago

Is there a lazySizes command I can run to recheck/reload elements within a container? Becauseit loads the wrong size :/, but if I do above function it reloads the correct size

andrew-serrano commented 3 years ago

We are experiencing a similar issue on one of our merchant's site as well. When testing this on a iPhone in Safari with a cleared browser cache it always displays the desktop version of the image, instead of the mobile version. Upon reloading the page the mobile version is displayed. This seems to only happen on mobile for us.

Below is a snippet of the HTML that is currently being rendered. 

<div class="x-hero__image lazyloaded" role="img" aria-label="Hero Banner Full Image" data-bg="themes/levels/sfnt_build/images/hero_3-3.jpg" data-bgset="themes/levels/sfnt_build/images/Mobile-Ring-Banner.jpg [--small] |themes/levels/sfnt_build/images/Tablet-Ring-Banner.jpg [--medium] |themes/levels/sfnt_build/images/hero_3-3.jpg" style="background-image: url(&quot;themes/levels/sfnt_build/images/hero_3-3.jpg&quot;);"></div>
    <picture style="display: none;">
        <source data-srcset="themes/levels/sfnt_build/images/Mobile-Ring-Banner.jpg" media="(max-width: 640px)" srcset="themes/levels/sfnt_build/images/Mobile-Ring-Banner.jpg">
        <source data-srcset="themes/levels/sfnt_build/images/Tablet-Ring-Banner.jpg" media="(max-width: 959px)" srcset="themes/levels/sfnt_build/images/Tablet-Ring-Banner.jpg">
        <source data-srcset="themes/levels/sfnt_build/images/hero_3-3.jpg" srcset="themes/levels/sfnt_build/images/hero_3-3.jpg"><img alt="" class=" lazyloaded"
    </picture>
</div>