Why are images not displaying correctly on my collection page?

[RoshanWeb]

Hello everyone, 
As you can see in the image attached. I have been experiencing this glitch/error on the collection page. Images on product pages throws an error 404 file not found, but Images are properly been put. I am using theme and couldn't find any solution from team on this matter. This only happens for particular phones and sizes. For an example if I open this link on laptop size more than 1024px I won't be able to see any image but if I use the same link and open in an another android phone it opens but sometimes it doesn't. Is it because JS or jQuery? Mostly google is showing me that solution but used and it is not

 

[tim · Accepted solution]

Yes, this is a jQuery problem.

You actually loading 5 copies of jQuery on your page. 

Initially your theme was designed to work with jQuery 2.14, but you also have 1.9.1, 3.6.0 and 3.6.3 loading...

How it was designed --  there is a function initImagesSize in your theme.js.  This function finds a width of each image element and updates image source parameter to load proper file. Say, image width on screen should be 200px, then the code updates image src/srcset to be image_200x.jpg and Shopify will produce image which is 200px wide.

When browser is resized, this function should run again and update image src to reflect new width.

In older versions of jQuery $(el).width() always returned rounded integer values.

Since jQuery 3.0 width() returns float, so the code can easily produce image_200.5x.jpg which does not work with Shopify image rendering engine.

Ideally you should keep only one copy of jQuery and get rid of the other 4. 

You can't keep 2.1.4 or 1.9.1 because you have other JS errors which will prevent your theme from working properly, so you may try leaving one of the 3.xx.

Then you need to find initImagesSize  function in your theme.min.js  and the following code inside this function:

      w = Math.min(wn, 2000) + "x",
      w2 = wn * 2 + "x",

And modify it like this:

      wn = Math.ceil(wn/10)*10,
      w = Math.min(wn, 2000) + "x",
      w2 = wn * 2 + "x",

This will ensure that image sizes are always rounded.

That's what I'd try first. Not sure if this will completely fix the problem because there are some other errors in your code, but it's a step in the right direction.

And do not forget to make a theme copy as a backup before editing...

[RoshanWeb]

Hi Tim, 

Thank you for this small yet effective solution. The code which you provided fits perfectly fine. Also, 1 more concern. The images on website is of high resolution and for faster load speed of the page I have used a lot of apps, used to put the lower version of images and tried putting async and defer tags on scripts but nothing was helping instead because of this some scripts used to load slow and break the whole layout. Can you tell me what is the best practice to load page faster with image been high resolution? and solution on this?

[tim]

For starters, get rid of extra jQuery copies. Ther 

Second -- your show-on-hover images are not lazy loaded even though they have class lazyload, they also have src:

<img class="lazyload" src="//soul-foods.in/cdn/shop/files/mango-pickle-amz_600x.webp?v=1710409692" alt="Mango Pickle in Olive Oil (265 gms)"/>

To make them lazy-loaded you need to change from src to data-src.

Try to fix JS errors in console because these are also negatively affect site speed.

[RoshanWeb]

Hi Tim,

Thank you for your response. I have tried changing src to data-src but didn't made any difference on website. Also, I am not very much familiar with JS so is there any other way for solution or can you help me with it?

[tim]

If you want to hire me, please send me a private message. I can certainly do some fixing/speed improvements for your theme.