Issue: Lazy Load

Hoping someone could help. I have placed a few Lazy Load stacks within a Partial to be used as part of the website’s footer, however only a few images load during preview and after publish. Also the images that load change from page to page.

Is there an issue with using Lazy Load and Partials in this way?

Warmest regards,
Tom Fitzgerald.

Hi there @SASDemon – I’ve not run into this problem before, but will be glad to try and check it out for you. If you can send me a ZIP file containing your project file and images, as well as a link to your live URL, I can have a look at it at my soonest opportunity.

Hey there @SASDemon – Just following up on this post since I had not heard back from you.

Thanks for getting back to me. Hope you enjoyed your trip. It’s odd. Lazy load is loading on Google Chrome, but not in Safari.

Please scroll to the footer. I am just getting together the zip file for you, what email address would you like me to send it to?

Your images appear to be 300 dpi, which is huge. That is more a print resolution than a web design size. You’ll want them to be 72 dpi. Some browsers will not load 300 dpi images.

I’d suggest fixing the images and swapping out the current ones with the new versions then doing a Republish All Files.

That said though, if you continue to have problems after that, please let me know what versions of the following you’re using:

  • OS X
  • Safari
  • Chrome
  • RapidWeaver
  • Stacks

You can send it to adam at elixirgraphics dot com or send it via a Direct Message here on the forum.

I have exported smaller images via Adobe Illustator, stuck them in the project and uploaded them to the same url given previously and they’re still not loading on Safari. Not even within the RapidWeaver Preview page (which I am guessing uses Safari).

I’ve zipped up the Project File and the images and have sent them to your email address. Hope that helps.

Got your email @SASDemon, but unfortunately the Google Drive link you sent does not want to allow me to access it. Not familiar enough with Google Drive to know why that is. Any chance you can send it a different way?

Off topic but I feel I have to point out that the combination of the school logo, the image of children playing and the parallax effect combine to make it look (at least to me) like we are looking down the sight of a sniper’s rifle and looking for a head shot as we scroll down the page. Probably not ideal for this context.

@SASDemon Received your project file via Direct Message. Download perfect this time! Will take a look at this as soon as possible.

@SASDemon Can I ask what program you used to save you PNG files? I’m asking because I was experimenting with your images, and if I re-save some of the images using Photoshop’s save for web feature they seem to work again (sporadically)in the Lazy Load stack in Safari.

Since it is working on Chrome and FireFox, I and suspecting it is a Safari bug. I’ll continue to investigate, but wanted to touch base.

@SASDemon So it seems Safari has some sort of bug where it does not want to always lazy load the images if their image sizing is set to Upscale. Seems like an oddity with Safari. If you set the sizing to Normal on all of the images instead of Upscale Safari should work again. I’ll see if I can workout why Safari dislikes this, but it should really make no difference. That and the fact that it works perfectly fine in other browsers is what leads me to believe it is a Safari bug / quirk.