[SOLVED] Images loading twice (due to imagesLoaded v4 JS)

[faebe]

Bricks Version : 1.3.2
Browser : Safari 14.1.1
OS : macOS
URL : nah

It seems like the frontend is requesting each image twice: once the src and a second time the better sized srcset. Is this intended behavior? I guess it improves initial load time but also increases the total amount of assets requested.

Setup: One 600x400px image added (source size and actual display size). The 600x400px image is in the src, additional sizes like 1200x800px are in the srcset. The frontend first loads the 600x400px image, and a split second later the 1200x800px version.

[timmse]

Hi @faebe,

i can confirm that behavior, but only if i’m logged in. If i log out from the backend, only one image is requested. I can’t think of a reason for it …

[faebe]

Interesting, I do have the same behavior being logged out using a clean private window. (Safari 14.1.1 on MacOS 11.4)

[timmse]

Yeah you’re right. Just tested in Safari (14.1.1): there are two images… in Chrome (92) like i said only when logged in, also on MacOS 11.4.

Let’s wait for a developer response.

[faebe]

Hm, I also get two images in Chrome 91 (incognito mode logged out). Chrome dev tools:

Well… we’ll wait for a response and see

[Markus]

can confirm that / happens as well with fire fox.

I currently use unset($attr[‘srcset’]); to solve this issue. (even woo products now load the “correct” img size on mobile view)

[yankiara]

Hi @timmse and @thomas,

Any update on this??? This is MAJOR.

Same problem in 1.4RC on Windows/Firefox, logged-in or logged-out.
(Bricks and native WP lazyloads deactivated)

Why does bricks.min.js load other images?
Lazyload is disabled, there should be no JS implied in image loading…

Thanks in advance!

EDIT: Looks like first image loaded is the right one according to srcset, then second image loaded is the size set in the builder, like if Bricks forced the selected size regardless of screen size.

[Markus]

Yan, right now I’m working on windows 11 / Chrome Version 101.0.4951.41. no more issues with double loading img’s. but I’ll have to check how things are looking on MacOS

[yankiara]

Maybe it has to do with imagesLoaded library which seems to be included in bricks.min.js but this part of the code is totally UNunderstandable:

[thomas]

Yep, it’s due to the imagesLoaded JS library (v4) that Bricks is using in combination with a srcset image as reported by another imagesLoaded user here: Including the imagesloaded.js library causes <source srcset> images to load two versions of the image, increasing bandwidth by ~4x · Issue #295 · desandro/imagesloaded · GitHub

imagesLoaded 4 is creating proxy images, which causes an additional image to load.

While the issue seem to have been fixed in imagesLoaded v5 I am currently checking to get rid of this library altogether. I’ll report back as soon as I have some news. But it seems doable …

[robp]

@thomas Was this resolved sorry?

Is this related to what I’m seeing here, the first image is pulling the thumbnail and the srcset seems to be calling in underneath the first lot. The other post loop images seem fine however, and the size to use was set to large, not the thumbnail or small ones.

http://recordit.co/LwTRdRjdaw

Thanks

[thomas]

The image being loaded twice issue has been fixed. The one shown in your video is not loading the image twice, but breaking the HTML somehow. Can you get in touch via email about this technical issue, and provide the URL where it occurs + some temporary admin login details, so we can have a look at the setup in the builder. Thank you so much!

[robp]

Hi Tom, thank you. I actually made a thread for this so happy to continue that in there - I’ve shared the URL in there but no login details yet. What’s the best way to send that over on this?

[thomas]

@robp

What’s the best way to send that over on this?

Contact – Bricks

[robp]

Hi Thomas - that’s been sent now

I have moved the thread to WAIT: IMG SRC SET Issue