I'm currently using Foundation data-interchange to handle responsive images.
Here the recommended syntax where (default) and (large) are the media queries:
<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]" alt="">
The problem:
There is a little delay between the moment the page dispays and the moment the data-intechange image displays.
The delay is quite normal as the image is loaded with JS when Foundation is ready, but it is not visually nice to the see the image suddenly appears after 500ms of showing the alt attribute like if the image was broken.
I was thinking about putting an image by default:
<img src="a-default-image.jpg" data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]" alt="">
However, if I put the real 'default image' the result is not better (instead of having 'broken image' then 'big image', I have 'small image' then 'big image').
If I put a blank image, the result is kind of ok (no more alt showing), but now, I'm afraid that if the image is indexed by Google, it will be that blank image.
I also could hide the image until the replace Foundation event is fired, but I would prefer avoid it unless there is no other solution.
So, is there any other simple workaround I could use?
