Want to change the loading settings for images in a dynamic rich text block

Design help General
1

I have implemented a scroll button in my website but it always seems to get stuck halfway in the published version. The button scrolls from top to bottom of an image-heavy (200+) dynamic rich text block.

I know its a loading issue because when I manually scroll through and let all the images load, then click the Scroll down button, it works perfectly. I can’t change the format of the content.

When I try to change the loading settings of the image in that dynamic rich text block class, I am met with this. I can’t figure out the next step if there is one.

image

I have emulated the situation in this project, but it doesn’t lag the same way in the published version - with the real project it does include many other text and heading blocks.

https://preview.webflow.com/preview/denali-test-2?utm_medium=preview_link&utm_source=designer&utm_content=denali-test-2&preview=8de2befd86f093af4ca2d06a42b37128&pageId=60ede181a7418d567cad2776&itemId=60ede181a7418d7c07ad27f6&workflow=preview

Is there a way to change the loading from lazy to eager for the images in the dynamic rich text? Ideally I don’t want to change the resolutions as it takes too much time.

image

1 Like
2

Hi Yousaf, @YB4704, did you find a workaround/solution this? I’ve encountered the same problem and Webflow support says it’s a known bug.

1 Like
3

Here’s a hack that should work around the problem in most cases. Add it before your tag as custom code:

<!-- Eager load images post-load to ensure internal anchors link to appropriate Y coordinates -->
<script>
  window.addEventListener('load', () =>
    document.querySelectorAll('img[loading="lazy"]').forEach(
      (img) => img.setAttribute('loading', 'eager')
     )
  );
</script>