Hi! I have a problem with the loading of the pictures of a Debut theme website I am helping a friend with.
The header logo only shows in full once you scroll a little.
There is a similar problem with the product photos, except the main photo, on the product page. Initially, it shows as an empty rectangle. Once you move the mouse around, the full gallery shows. I welcome any advice! Thank you!
Yes please!
Hi @vpaskaleva
In your header.liquid or theme.liquid, look for how the logo is rendered. Shopify uses the lazyload class like this:
Change it to:
This disables lazy loading for the logo, ensuring it loads immediately.
Let me know if need further assistance
Regards,
Artzen Technologies
Thanks! But it’s not working. Here is a link to the website to see: https://www.northumbriancandleworks.co.uk/
This is a result of speed optimization, most probably by SpeedBostr app.
The strategy is to output an image with “width” and “height” attributes set to 1. I guess, browser would not load this image.
Then immediately on load, check images in viewport and remove these attributes to force image loading.
Then, when you scroll, remove the attributes from all images.
However, this does not work properly – for whatever reason first step does not work properly.
And while doing that, they also ruined theme native lazyloading…
Unfortunately, I can’t suggest anything – I am not familiar with the app settings and whether it’s possible to undo these changes…
It would be possible to repair manually, but ned to see the code.
You can try reaching to the SpeedBoostr people and ask for help, even threaten them with bad review, but …
Frankly, I believe your time is probably better spent moving to a modern theme – they would be faster by design and offer seriously more configuration options and flexibility.
I uninstalled the app, but it is still happening…