Menu icon Foundation
Data-Interchange Default Image Swap

Hi,

Is there a better solution to the Interchange example in the Foundation docs to load images where the default image doesn't swap with the media query one when triggered?

That is, if you have a default image for SMALL screen and you view the page on LARGE screen, then there is a visual flip of the small image with the large image. It's not very good user experience.

I tried removing src attribute from the but I've read that it's affecting performance and I don't want to use a hack like this.

This is the recommended usage on Foundation docs page:

<img data-interchange="[http://foundation.zurb.com/docs/assets/img/examples/space-small.jpg, (small)], [http://foundation.zurb.com/docs/assets/img/examples/space-medium.jpg, (medium)], [http://foundation.zurb.com/docs/assets/img/examples/space-large.jpg, (large)]" src="http://foundation.zurb.com/docs/assets/img/examples/space-small.jpg">
            

         

data-interchangeimagesmedia queriesinterchange

Hi,

Is there a better solution to the Interchange example in the Foundation docs to load images where the default image doesn't swap with the media query one when triggered?

That is, if you have a default image for SMALL screen and you view the page on LARGE screen, then there is a visual flip of the small image with the large image. It's not very good user experience.

I tried removing src attribute from the but I've read that it's affecting performance and I don't want to use a hack like this.

This is the recommended usage on Foundation docs page:

<img data-interchange="[http://foundation.zurb.com/docs/assets/img/examples/space-small.jpg, (small)], [http://foundation.zurb.com/docs/assets/img/examples/space-medium.jpg, (medium)], [http://foundation.zurb.com/docs/assets/img/examples/space-large.jpg, (large)]" src="http://foundation.zurb.com/docs/assets/img/examples/space-small.jpg">