I'm writing a pretty simple function to only load the image that is required from a group of four potential images. I have a different version based on size and based on whether or not the browser supports svg; so I don't want to load potentially* four sources for each image - [ * sometimes browsers load images even if display is set to none ].
( note: As I'm writing this question - I'm thinking that maybe I'm going about loading these images the wrong way, but this question remains.)
Anyway, I have img tags with a data-source attribute for each image needed. None of them have a src set at the moment, and I haven't written the js yet to do load the correct one. However, Chrome is loading the image anyway.
When I look at the images when the page loads, the browser has created a src attribute for the first image in each set, and then populated it with the value from data-source for that image.
In other words - first image should show up in the browser like this:
<img data-source="my-image.png">
But instead shows up like this:
<img data-source="my-image.png" src="my-image.png">
Is it in fact Chrome that's doing this? If so, why? (Although I can guess). And is this based upon some principle that would lead a web developer to reasonably expect this to happen (e.g. "That's what data-attributes are for dumbass." ) ?
