images download twice

[ashehzadgec]

Describe your problem/question
First of all, I really apologizes, my question is not related to lazysizes but I was stuck with one problem related to image responsiveness and your are someone who is master with images science, here is it as follows:
I have two section of images, 1 for desktop and tablet and 1 for mobile and at a time only 1 section is visible through "display:none". I am using the following code to avoid hidden images being download when they are not visible to user.

  `	<img data-srcset="	xlargeimg.jpg 600w,
	                        largeimg.jpg 500w,
	                        mediumimg.jpg 400w,
	                        smallimg.jpg  350w,
	                        xsmallimg.jpg  300w"
                                sizes="(min-width:577px) and (max-width:800px) 300px, (max-width:1024px) 350px,  600px"
                                data-src="largeimg.jpg"	alt="images" />

                                    heroImg.forEach((img) => {
                                    img.src = img.dataset.src;  // if I remove this line images are not downloaded twice.
                                    img.srcset = img.dataset.srcset;
                                    });`

The problem is my images are downloaded twice (one from data-srcset and second from the data-src) and it was quite frustrating to me and tried to fix it for like a week or more but could not find a reliable solution. Today I find a solution that stops hidden images from downloading. That is done by removing "img.src = img.dataset.src". Now images does not download twice. Can you help me to understand why that line was causing this problem. And it is safe to avoid that line.

I really appreciate any kind of help and guidance.

[aFarkas]

It would help me. If you could create a test case for this on jsbin.com or something similar. With this we know we speak about the same thing. Your code seems to look quite easy to implement too.

In general it seems strange that this happens because the img selection algorithm should happen async after both lines are added.
Does this happen in all browsers? Does it still happen if you add srcset first and src second? Due to the fact that src is considered as a fallback for old browsers and shouldn't have any meaning (There is one shorthand exception for x descriptors though.), you can always omit adding src if browser supports srcset.

[ashehzadgec]

Thanks for your kind consideration and reply. I was afraid that you may not respond to my query at all. 1- Below is the link for the demo. (I should have made one before). https://codepen.io/ShehzadAsif/pen/oNBQbVG?editors=0010 2- I checked it on chrome, opera, edge and firefox (not safari). All browsers download the images twice except firefox without disabling the data-src (with the use of following code). I think it is happening only on chromium based browsers. ( img.src = img.dataset.src; ) 3- I am using the data-src attribute after all other things like after data-srcset, sizes as in the demo. I am curious to know what causing this behavior and how this can be avoided. Regards, Shehzad Asif

…

On Wed, Apr 21, 2021 at 2:32 PM Alexander Farkas ***@***.***> wrote: It would help me. If you could create a test case for this on jsbin.com or something similar. With this we know we speak about the same thing. Your code seems to look quite easy to implement too. In general it seems strange that this happens because the img selection algorithm should happen async after both lines are added. Does this happen in all browsers? Does it still happen if you add srcset first and src second? Due to the fact that src is considered as a fallback for old browsers and shouldn't have any meaning (There is one shorthand exception for x descriptors though.), you can always omit adding src if browser supports srcset. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#890 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APQYRBQQV2EDCZ4KJDVU7MDTJ2LUFANCNFSM43J7FTEA> .

[aFarkas]

While I see two downloads per image. This is a result of a server side redirect. This is by no means controlled by the src line you are mentioning above.

Here is a more simplified test case:
https://jsfiddle.net/74yvuhcg/

If you load the following image directly:
https://source.unsplash.com/mqyTTtHO4SM/450x550 you will see a redirect to
https://images.unsplash.com/photo-1610653123505-6480cc9b37f3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=550&ixid=MnwxfDB8MXxhbGx8fHx8fHx8fHwxNjE5MDExMjMx&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=450

[ashehzadgec]

Thanks for the clarification, you are right. I checked my project page again and Now I can see that first image is from imagesloaded library and second image is from hideimgs function.. So what do you suggest to me to tackle this scenario. How can I do this in a better way to avoid double download?

…

On Thu, Apr 22, 2021 at 12:36 PM Alexander Farkas ***@***.***> wrote: While I see two downloads per image. This is a result of a server side redirect. This is by no means controlled by the src line you are mentioning above. Here is a more simplified test case: https://jsfiddle.net/74yvuhcg/ If you load the following image directly: https://source.unsplash.com/mqyTTtHO4SM/450x550 you will see a redirect to https://images.unsplash.com/photo-1610653123505-6480cc9b37f3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=550&ixid=MnwxfDB8MXxhbGx8fHx8fHx8fHwxNjE5MDExMjMx&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=450 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#890 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APQYRBT43ULZAYNOUWTVLDLTJ7GWXANCNFSM43J7FTEA> .

[ashehzadgec]

Hey I am writing this email just for the appreciation from the bottom of my heart for your awesome efforts and hard work for our community. You know sometimes something happens, you are trying to do something then you read the documentation again and again until you find the answers or solutions and you just can't explain those moments of happiness. Thanks for this amazing library and one of the best documentation (very few documentations are easy to follow and understand). It cuts down a big chunk of our hard work that we will have to deal with otherwise. I really appreciate it. Regards, Shehzad Asif