Retina images are loaded twice about responsively-lazy HOT 15 CLOSED

Why do you think it is loaded twice?

from responsively-lazy.

Because the Network tab indicates it:

The produced code from responsively-lazy (when images are loaded):

<img class="responsively-lazy" data-srcset="person.png?a5d4227fb0532c90a39d82c366e571a6 480w" src="person-min.png?5cf834969a2582645e2c547bb22bc33f" srcset="person.png?a5d4227fb0532c90a39d82c366e571a6">

The code in the html (before lazy loading):

<img class="responsively-lazy" src="person-min.png" data-srcset="person.png" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

from responsively-lazy.

Can you please install v2.0.0 and try again.

from responsively-lazy.

I've already installed the latest from your git repo, and I still have
the same results.

from responsively-lazy.

Can you please send me another screenshot of your Network tab and make the 4th column slightly bigger, so that the whole content is visible.

from responsively-lazy.

@ivopetkov Oh, dang. I didn't respond to this. 😞 , sorry :(

Here is the screenshot, this is from a "hard refresh"

soft refresh:

from responsively-lazy.

@phun-ky Where you able to solve this issue. I'm running into the same problem.

from responsively-lazy.

@ivopetkov here is another example:

The login.jpg image is set as the src, blurry is set to srcset and data-srcset is ${login} 960w, ${login2} 1920w, ${login3} 3840w

Tbh, this ${login} 960w, ${login2} 1920w, ${login3} 3840w should probably based on the correct sizes of the files: ${login} 1440w, ${login2} 2880w, ${login3} 4320w

Same setup, different zoom:

I will add a video of the network tab so you can see. This video recording is from windows chrome, and I see that the second version of the same image are downloaded after the first version of the image is downloaded.

https://www.youtube.com/watch?v=sUSlBC8DbdY&feature=youtu.be

ALL PROVIDED EXAMPLES ARE FROM LINUX CHROME UNLESS OTHER IS SPECIFIED

In IE Edge, I get just the login.jpg. (as expected (?))

@ymnj have not solved this yet

from responsively-lazy.

I wanted a screenshot with a larger 4th column, so it's clear who is the initiator of the requests. In your screenshots and video the values responsivelyLazy.js, preact.js, vendors.js and Other at shown. I'll review again the images loading code in Responsively Lazy, but I believe in this case the reason for double loading are the other libraries you use. I'd recommend a deeper dive into their's code to see what and why they do.

from responsively-lazy.

A side note: I think that the desired usage of this module is not quite compatible with a react + redux SPA, since it's not quite clear on how I can control the initialisation of the module.

But here's how I've set it up, and the culprit is the re-render, I assume:

I've created a component, ResponsiveImage, that takes in the required params to operate, and sets an is-loaded class to it via setState. This means that the order of what is happening in the last given scenario (one image) is like this:

1. Image renders
2. Image is loaded (downloaded and displayed)
3. onLoad is fired
4. setState sets className, forces a re-render
5. Image renders again
6. Image is loaded (downloaded and displayed)
7. onLoad is fired, nothing happens (since imageLoaded is not changed)

EDIT: with this screenshot, you see that it is responsively lazy that initiates it:

And it's referring to https://github.com/ivopetkov/responsively-lazy/blob/master/responsivelyLazy.js#L108 and https://github.com/ivopetkov/responsively-lazy/blob/master/responsivelyLazy.js#L119

EDIT 2: In light of the new screenshot above, it is unlikely that the culprit of this issue is react or the re-rendering of the component. It is not the default browser behaviour to download an image with the same URL twice or more if it exist in the DOM or in the cache. Even if you insert two DOM-nodes with the same image on the same time, the image is not downloaded twice. So it has to be something with the caching or that the module (responsively lazy) do something with the URLs. (Or downloaded in an other way than through DOM-nodes)

from responsively-lazy.

Thanks. I think I have a solution. I'll write you back soon.

from responsively-lazy.

I've made a fix. Can you please download the JS code from the master branch and test on your environment.

from responsively-lazy.

Looks much better! Please publish the fix to npm aswell ;)

from responsively-lazy.

Great job guys 👍

from responsively-lazy.

v2.0.1 is on npm now.

from responsively-lazy.