Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: scottjehl/picturefill
...
head fork: scottjehl/picturefill
Checking mergeability… Don’t worry, you can still create the pull request.
  • 10 commits
  • 2 files changed
  • 1 commit comment
  • 3 contributors
Commits on Mar 22, 2012
scottjehl null commit - update ghpages, update! 794dbb0
Commits on Mar 26, 2012
scottjehl This branch is a div-based equivalent of the picture element markup p…
…attern. It can be used today without concern for running into problems with differences in future picture implementations. That said, it will always be tied to JavaScript, and the markup is a little clunky to those with an eye for semantics.
1bb548a
scottjehl oh alerts? oldskoo. gone a548592
Commits on Apr 23, 2012
scottjehl following up with the same fix for the div branch, addressing #11 4af59f1
Commits on Jun 16, 2012
Scott Jehl Implemented a sample behavior for resolution switching in HD environm…
…ents based on user prefs
6baa8aa
Scott Jehl persist prefs in localStorage if possible 86a1ab8
Commits on Jun 20, 2012
Scott Jehl styles c984e30
Scott Jehl updates, merges from master 35d2902
Scott Jehl updated markup 95ee9ad
Commits on Jun 23, 2012
@Wilto Wilto Throttling the resize event prevents small-screen browsers from trigg…
…ering multiple resize events as high-res images are loaded in.
25db27b
Showing with 81 additions and 24 deletions.
  1. +20 −4 index.html
  2. +61 −20 picturefill.js
View
24 index.html
@@ -7,8 +7,25 @@
<script src="external/matchmedia.js"></script>
<script src="picturefill.js"></script>
<style>
- body { font-family: sans-serif }
+ body { font-family: sans-serif; max-width: 375px; margin: 50px auto; }
img { max-width: 100% }
+ div[data-picture] {
+ position: relative;
+ display: inline-block;
+ }
+ .pf-pref {
+ position: absolute;
+ right: 1em;
+ bottom: 1em;
+ background: #fff;
+ opacity: .8;
+ padding: .1em .3em;
+ color: #444;
+ font-size: .7em;
+ text-decoration: none;
+ border-radius: .2em;
+ font-weight: bold;
+ }
</style>
</head>
<body>
@@ -19,9 +36,8 @@
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<div data-src="external/imgs/small.jpg"></div>
- <div data-src="external/imgs/medium.jpg" data-media="(min-width: 400px)"></div>
- <div data-src="external/imgs/large.jpg" data-media="(min-width: 800px)"></div>
- <div data-src="external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></div>
+ <div data-src="external/imgs/medium.jpg" data-media="(min-width: 300px)"></div>
+ <div data-src="external/imgs/extralarge.jpg" data-media="(min-width: 300px) and (-webkit-min-device-pixel-ratio: 1.5)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
View
81 picturefill.js
@@ -1,51 +1,92 @@
/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with divs). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
-
(function( w ){
// Enable strict mode
"use strict";
+
+ // User preference for HD content when available
+ var prefHD = false || w.localStorage && w.localStorage[ "picturefill-prefHD" ] === "true";
w.picturefill = function() {
var ps = w.document.getElementsByTagName( "div" );
-
+
// Loop the pictures
for( var i = 0, il = ps.length; i < il; i++ ){
if( ps[ i ].getAttribute( "data-picture" ) !== null ){
var sources = ps[ i ].getElementsByTagName( "div" ),
- matches = [];
+ matches = [],
+ hasHD = false;
// See if which sources match
for( var j = 0, jl = sources.length; j < jl; j++ ){
var media = sources[ j ].getAttribute( "data-media" );
// if there's no media specified, OR w.matchMedia is supported
if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
- matches.push( sources[ j ] );
+ if( media && media.indexOf( "min-device-pixel-ratio" ) > -1 ){
+ hasHD = true;
+ if( prefHD ){
+ matches.push( sources[ j ] );
+ }
+ }
+ else {
+ matches.push( sources[ j ] );
+ }
}
}
+
+ var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
+
+ if( matches.length ){
+
+ if( !picImg ){
+ picImg = w.document.createElement( "img" );
+ picImg.alt = ps[ i ].getAttribute( "data-alt" );
+ ps[ i ].appendChild( picImg );
+ }
+ picImg.src = matches.pop().getAttribute( "data-src" );
- // Find any existing img element in the picture element
- var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
-
- if( matches.length ){
- if( !picImg ){
- picImg = w.document.createElement( "img" );
- picImg.alt = ps[ i ].getAttribute( "data-alt" );
- ps[ i ].appendChild( picImg );
+ if( hasHD ){
+
+ var prevSwitch = ps[ i ].getElementsByTagName( "a" )[ 0 ],
+ picSwitch = w.document.createElement( "a" );
+
+ if( prevSwitch ){
+ ps [ i ].removeChild( prevSwitch );
+ }
+
+ picSwitch.href = "#";
+ picSwitch.innerHTML = ( prefHD ? "S" : "H" ) + "D";
+ picSwitch.title = "Switch image to " + ( prefHD ? "Standard" : "High" ) + "Definition";
+ picSwitch.className = "pf-pref pf-pref-" + ( prefHD ? "standard" : "high" );
+ ps[ i ].appendChild( picSwitch );
+ picSwitch.onmouseup = function(){
+ prefHD = !prefHD;
+ if( w.localStorage ){
+ w.localStorage[ "picturefill-prefHD" ] = prefHD;
+ }
+ w.picturefill();
+ return false;
+ };
+ }
+
+ }
+ else if( picImg ){
+ ps[ i ].removeChild( picImg );
}
-
- picImg.src = matches.pop().getAttribute( "data-src" );
- }
- else if( picImg ){
- ps[ i ].removeChild( picImg );
}
}
- }
};
// Run on resize and domready (w.load as a fallback)
if( w.addEventListener ){
- w.addEventListener( "resize", w.picturefill, false );
+ var throttle;
+ w.addEventListener( "resize", function() {
+ if( throttle ) { w.clearTimeout( throttle ); }
+ throttle = w.setTimeout(function () {
+ w.picturefill();
+ }, 150 );
+ }, false );
w.addEventListener( "DOMContentLoaded", function(){
w.picturefill();
// Run once only
@@ -57,4 +98,4 @@
w.attachEvent( "onload", w.picturefill );
}
-}( this ));
+}( this ));

Showing you all comments on commits in this comparison.

@scottjehl
Owner

Nice change. Could this line just be w.setTimeout( w.picturefill, 150 ); ?

Something went wrong with that request. Please try again.