响应式图片填充工具picturefill

来源：互联网发布：企业报表软件编辑：程序博客网时间：2024/06/05 05:32

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="…">

sizes定义img显示的尺寸

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/bmp
image/xbmp
image/jp2
image/vnd.ms-photo
video/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" ) ]});

0 0