lazysizes: Some images with lazyload class sometimes get stuck in the lazyloading state

Some images with lazyload class in some cases get sucked in the laziloading state with the laziloading class, and they never get the lazyloaded class. However the images are loaded by the browser, but they are not displayed.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 2
  • Comments: 40 (13 by maintainers)

Most upvoted comments

@wplerp Maybe you forgot to disable the auto init feature?

<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.init = false;
</script>

<script>
onMyCallback(lazySizes.init);
</script>

@aFarkas Yes! that fixed it. Thank you for your fast response!

I was using HTML commenting to hide some HTML from being indexed - content that I write into the page on load so I think the rewriting of html (using .html(content) inside document.ready) was causing issues since lazyloading was initialising from the head element - but not entirely sure this was the issue. I did fix it though by doing this at the end of my jquery document.ready script: $(‘.lazyloading’).addClass(‘lazyload’).removeClass(‘lazyloading’); I did this to try and get any elements stuck in lazyloading to retrigger their loading etc. This seems to have fixed the issue. I thought about delaying the init of lazysizes until the end of document.ready but like the idea of images starting to load ASAP.

fwiw, had a similar issue with Vue, had to delay lazySizes.init until after Vue had mounted our SSR dom elements