响应式图片填充工具picturefill
许远航
https://github.com/scottjehl/picturefill
http://scottjehl.github.io/picturefill/
picturefill允许web开发人员根据不同的屏幕大小、视口大小、屏幕分辨率等情况提供不同的图片给用户。
picturefill使用方法
首先引入JS（需要在HTML文档头部引用）
<script src="picturefill.js"></script>为了使你的网页能够有效的加载，建议增加一个异步属性的脚本标签。告诉浏览器可以异步加载picturefill，不需要等待它加载完成之后再去加载其余的内容。如果你添加这个属性，你需要在引人picturefill之间加入一行脚本，同时也是为了让老的浏览器在picturefill还没有完成加载时遇到picturefill可以识别picture元素。
<head>
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.js" async></script>
</head>注意：如果你文档中已经包含了html5 shiv（例如：Modernizr），那么你就不需要包含这段JS脚本。当然，许多高级的使用者可不需要这样，而是选择像Require.js一样动态的加载picturefill。（AMD和CommonJS的支持包括在脚本）。
具体使用方法
一旦你已经包括picturefill.js，你就可以开始添加响应图像元素到您的网站！ Picturefill增加了对响应图像解决方案，包括图像元素和新的img元素属性的整个套件的支持。
使用`srcset`属性
<img srcset="examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x" alt="…">使用`srcset`和`sizes`属性
<img
sizes="(min-width: 40em) 80vw, 100vw"
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w"
alt="…">
srcset定义图片源以及图片的自然大小。
浏览器会根据实际情况自主选择加载哪张图片
使用‘picture'属性
<picture>
<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
<source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
<img srcset="examples/images/art-medium.jpg" alt="…">
</picture>picture中的type属性
Picturefill支持SVG和的WebP作为其核心的一部分，但以下MIME类型可以通过“typesupport”插件一起使用：
image/bmpimage/xbmpimage/jp2image/vnd.ms-photovideo/vnd.mozilla.apng
<picture>
<source srcset="examples/images/large.webp" type="image/webp">
<img srcset="examples/images/large.jpg" alt="…">
</picture>
（下面的我也不太明白）
picturefill 函数
picturefill({
reevaluate: true,
elements: [ document.getElementById( "myImg" ) ]
});
类似资料：