Webページの画像srcにメディアクエリー機能を追加します.
画像srcにメディアクエリーを追加します.
Cssのメディアクエリーのデフォルトはピクチャにsrcを指定していませんが、ブラウザの幅に応じてピクチャsrcを指定する必要がある場合は、コンピュータの場合、大きな図をロードし、携帯電話の場合、小さな図をロードします.
今日はjsでブラウザのメディアクエリーを拡張できる素晴らしい方法を発見しました.
ページにこのように書き、jsはこのように処理します.
それでいいです.
demo url: demo
Cssのメディアクエリーのデフォルトはピクチャにsrcを指定していませんが、ブラウザの幅に応じてピクチャsrcを指定する必要がある場合は、コンピュータの場合、大きな図をロードし、携帯電話の場合、小さな図をロードします.
今日はjsでブラウザのメディアクエリーを拡張できる素晴らしい方法を発見しました.
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Picturefill</title>
<script src="external/matchmedia.js"></script>
<script src="picturefill.js"></script>
<style>
body { font-family: sans-serif }
img { max-width: 100% }
</style>
</head>
<body>
<h1>Picturefill: A <picture> element polyfill</h1>
<p>For more info: <a href="http://github.com/scottjehl/picturefill">see project home.</a></p>
<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<span data-src="external/imgs/small.jpg"></span>
<span data-src="external/imgs/medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="external/imgs/large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- 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>
</span>
</body>
</html>ページにこのように書き、jsはこのように処理します.
/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
(function( w ){
// Enable strict mode
"use strict";
w.picturefill = function() {
var ps = w.document.getElementsByTagName( "span" );
// 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( "span" ),
matches = [];
// 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 ] );
}
}
// Find any existing img element in the picture element
var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
if( matches.length ){
var matchedEl = matches.pop();
if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
picImg = w.document.createElement( "img" );
picImg.alt = ps[ i ].getAttribute( "data-alt" );
}
picImg.src = matchedEl.getAttribute( "data-src" );
matchedEl.appendChild( picImg );
}
else if( picImg ){
picImg.parentNode.removeChild( picImg );
}
}
}
};
// Run on resize and domready (w.load as a fallback)
if( w.addEventListener ){
w.addEventListener( "resize", w.picturefill, false );
w.addEventListener( "DOMContentLoaded", function(){
w.picturefill();
// Run once only
w.removeEventListener( "load", w.picturefill, false );
}, false );
w.addEventListener( "load", w.picturefill, false );
}
else if( w.attachEvent ){
w.attachEvent( "onload", w.picturefill );
}
}( this ));それでいいです.
demo url: demo