Picturefill

data-disable-swap

Prevents picturefill from requesting more than one image.

Instructions

Start with your browser window small and then scale it large, you will notice the original image will remain. Then with the browser window large hit refresh, you will notice a different image will load.

Code sample

<div data-picture data-alt="Picturefill test" data-disable-swap> <div data-src="img/default.png"></div> <div data-src="img/320x90.png" data-media="(min-width: 200px)"></div> <div data-src="img/480x135.png" data-media="(min-width: 321px)"></div> <div data-src="img/640x180.png" data-media="(min-width: 481px)"></div> <div data-src="img/1024x228.png" data-media="(min-width: 641px)"></div> <div data-src="img/1440x405.png" data-media="(min-width: 1025px)"></div> <div data-src="img/1920x540.png" data-media="(min-width: 1441px)"></div> <noscript><img src="img/noscript.png" alt="Picturefill test" /></noscript> </div>

Need more info? View the project
Author: Tyson Matanich