Menu icon Foundation
interchange & WebP

Hi there,

I was wondering if there's a way to combine interchange.js and WebP.

Interchange doesn't have a support to detect webp, but Modernizr do that. So I've added webp detection to my modernizr, and now I can determine if a client supports webp.

The problem now is about combining this with interchange: I can change the file extension to webp after interchange have done his job (I will download 2 images, jpg + webp) and there's no interchange event before appending the src attribute.

Anyone have an idea about a solution?
Thank you in advance!

M.

interchangewebpresponsive images

Hi there,

I was wondering if there's a way to combine interchange.js and WebP.

Interchange doesn't have a support to detect webp, but Modernizr do that. So I've added webp detection to my modernizr, and now I can determine if a client supports webp.

The problem now is about combining this with interchange: I can change the file extension to webp after interchange have done his job (I will download 2 images, jpg + webp) and there's no interchange event before appending the src attribute.

Anyone have an idea about a solution?
Thank you in advance!

M.

Karl Ward over 5 years ago

Why not change the file extension before interchange executes? You could just just replace *.jpg with *.webp when modernizr detects support. A bit clumsy to work with the search/replace strings within the data-interchange elements, but should be pretty straight-forward.

matteo cavucci over 5 years ago

Hi Karl,
thank you for your answer.

I think there's no way to stop interchange until file extension are changed by JS, or am I wrong?
I have to intercept interchange before executes, otherwise browser pre-parser will starts to download .jpeg instead webp.

Karl Ward over 5 years ago

Unless you have ajax pages, I am sure you could sneak in your own JS function onLoad before you run $(document).foundation()? You would certainly want to replace the interchange array before interchange executes. Perhaps not the most stylish solution, but it should work to just replace strings .jpg with *.webp for all items with *data-interchange attribute.

In the interchange documentation, there is an event for the interchange replacement and also a way to manually trigger interchange, although I don't see how that would help much.