Skip to content
This repository has been archived by the owner on Oct 7, 2021. It is now read-only.
/ picturetime Public archive

PICTURE element polyfill with support back to IE9, fallback to IE8

Notifications You must be signed in to change notification settings

chuckcarpenter/picturetime

Repository files navigation

PictureTime

A shot at a responsive images strategy that can be used today, it mimics the proposed picture element. Of course this is subject to change.

This takes much from Scott Jehl's picturefill polyfill, but with the actual element.

Note: PictureTime includes (externally) the matchMedia polyfill which makes matchMedia work in media-query-supporting browsers that don't have matchMedia, or at least allows media types to be tested in most any browser. matchMedia and the matchMedia polyfill are not required for picturefill to work, but they are required to support the media attributes on picture source elements.

Markup pattern and explanation

Mark up your responsive images like this. Redundancy in commented source is for IE9, as it won't read the innertext otherwise. Also, currently the fallback IMG is left in place for IE8.

	<picture alt="Photo: Tiger in tall grass" />
		<!-- <source media="(min-width: 700px)" srcset="external/imgs/medium.jpg 1x, external/imgs/mediumplus.jpg 2x" /> -->
		<!-- <source media="(min-width: 900px)" srcset="external/imgs/large.jpg 1x, external/imgs/largeplus.jpg 2x" /> -->
		<!-- <source srcset="external/imgs/small.jpg 1x, external/imgs/smallplus.jpg 2x"> -->
	        <source media="(min-width: 900px)" srcset="external/imgs/large.jpg 1x, external/imgs/largeplus.jpg 2x" />
	        <source media="(min-width: 700px)" srcset="external/imgs/medium.jpg 1x, external/imgs/mediumplus.jpg 2x" />
	        <source srcset="external/imgs/small.jpg 1x, external/imgs/smallplus.jpg 2x"> 
	        
	        <!-- IE8 or non support fallback -->
	            <img src="external/imgs/medium.jpg" />
    </picture>

PictureTime will automatically watch your picture elements, so if you programatically change source child element or a src attribute, pictureTime will notice that something has changed and run itself to keep the photos fresh. By default, pictureTime watches the photos on the page twice a second.

About

PICTURE element polyfill with support back to IE9, fallback to IE8

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •