Picturefill

resolve-last

Makes the Picturefill image load quicker and more like an inline image.

Instructions

Open up Fiddler, HTTPWatch, or similar program and watch when the images get requested.

Code sample

<div style="display: none;">
    <img src="img/hidden.jpg?v1" alt="First image" />
</div>
<div>
    <div data-picture data-alt="Picturefill test">
        <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>
    <script type="text/javascript">window.picturefill.resolveLast();</script>
</div>
<div style="display: none;">
    <img src="img/hidden.jpg?v2" alt="Last image" />
</div>

Need more info? View the project
Author: Tyson Matanich