|
<!doctype html> |
|
<html class="no-js" lang="en-GB"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta http-equiv="x-ua-compatible" content="ie=edge"> |
|
<title>Picturefill when required</title> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<!--[if lt IE 9]> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> |
|
<!--<![endif]--> |
|
<script> |
|
// Picture element HTML5 shiv for older, non IE browsers |
|
document.createElement("picture"); |
|
var image = new window.Image(); |
|
// Check for support, if lacking load picturefill and run it once loaded. |
|
if (("srcset" in image === false) || ("sizes" in image === false) || ("currentSrc" in image === false)) { |
|
var pf = document.createElement("script"); |
|
pf.src = "https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.1/picturefill.min.js"; |
|
pf.type = "text/javascript"; |
|
pf.async = "true"; |
|
pf.onload = pf.onreadystatechange = function() { |
|
var rs = this.readyState; |
|
if (rs && rs != 'complete' && rs != 'loaded') return; |
|
try { picturefill(); } catch (e) {} |
|
}; |
|
var s = document.getElementsByTagName("script")[0]; |
|
s.parentNode.insertBefore(pf, s); |
|
} |
|
// Look familiar? It's just like the Typekit loader. |
|
</script> |
|
</head> |
|
<body> |
|
<img src="https://placehold.it/480x320" |
|
srcset=" |
|
https://placehold.it/1200x800 1200w, |
|
https://placehold.it/992x662 992w, |
|
https://placehold.it/768x512 768w, |
|
https://placehold.it/480x320 480w" |
|
sizes="(min-width: 75em) 75em, 100vw" |
|
alt="Wide Image" |
|
/> |
|
</body> |
|
</html> |
