Issue loading images on specific site on Linux
Browsing works well on my Ubuntu/Linux 22.04.5 laptop except one site. Images are not loading. I can see it has js-errors which might be related. And that may be because some js files are being blocked. The site does work on my iphone though. And using Browserstack I can see it works with other OS.
The site is: knowledgecottonapparel . com
I've verified that others using Linux has the same issue, https://askubuntu.com/questions/1526728/issue-with-specific-site
所有回覆 (6)
ben170 said
I've verified that others using Linux has the same issue, https://askubuntu.com/questions/1526728/issue-with-specific-site
"Others..." I only see you. see screenshot I tried 3 different browsers and all have the same issue. Post a screenshot of the site working.
@jonzn4SUSE Thank you for your reply! See the comments for my question on askubuntu. At least 3 people say they see the same issue and one says it works on Windows for him. I know it also does not work in other browsers on Linux. But shouldn't it work with Firefox on all OS?
Here is a screenshot of the site working on Browserstack. I think it's Windows 11 with Firefox 130.
What is the URL of an image that loads in a browser?
Does Firefox request the same URL in a browser where it doesn't work?
I see a lot of errors reported in the Web Console, so it is possible that the script that generates the correct URL (image size) isn't working.
Looks that that is right. I see this source link in the Inspector with a {width} parameter that gives a page not sound error.
I get the image if I replace this parameter with '2000'.
This is definitely a problem with scripts that aren't working properly and process dataset parameters to adjust the image width parameter to the current screen estate.
- data-src="//knowledgecottonapparel.com/cdn/shop/files/Custom_fit_linen_shirt-Shirts-1090011-1010_Bright_White_{width}x.jpg?v=1715672350"
- data-widths="[200,400,600,700,800,900,1000,1200]
This is a simple bookmarklet that makes the images show for me.
javascript:(function(){var B=0,k=0,W=[200,400,600,700,800,900,1000,1200][6];
document.querySelectorAll('img[data-src]').forEach(E=>{E.src=E.dataset['src'].replace('{width}',W);E.style.setProperty('opacity','1','important');E.style.setProperty('display','block','important');k++});if(B){alert('images adjusted: '+k)}})()
You can create a new bookmark and paste the JavaScript code in its URL field where you would normally enter the address of the website.
@cor-el Thanks a lot for the workaround! 👍
Do you have any idea why this works on other platforms and not on Linux? Should it be reported on any specific Linux package? Or should I bring this up with the makers of the site? It looks like they are using Shopify. I haven't seen problems with other Shopify sites though so it must be something else on the site.
I see one script file is not loading. This could be related, https://community.shopify.com/c/shopify-discussions/shopify-store-does-not-load-on-linux-os-but-works-fine-on-mac/td-p/2737085
由 ben170 於 修改
@cor-el Thanks a lot for the workaround! 👍
Do you have any idea why this works on other platforms and not on Linux? Should it be reported on any specific Linux package? Or should I bring this up with the makers of the site? It looks like they are using Shopify. I haven't seen problems with other Shopify sites though so it must be something else on the site.
I see one script file is not loading. This could be related, https://community.shopify.com/c/shopify-discussions/shopify-store-does-not-load-on-linux-os-but-works-fine-on-mac/td-p/2737085