做网站|网站建设，就上易助科技网

html css js 插件使用指南

您现在的位置:

首页

技术文档

技术文档详情

JS响应式图片填充插件picturefill

来源：易助科技网浏览量：7收藏

简介

picturefill允许web开发人员根据不同的屏幕大小、视口大小、屏幕分辨率等情况提供不同的图片给用户。

使用

1. 引入 picturefill.js 文件

2. HTML

为了使你的网页能够有效的加载，建议增加一个异步属性的脚本标签。告诉浏览器可以异步加载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。

使用`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>

3. 调用

picturefill({
  reevaluate: true,
  elements: [ document.getElementById( "myImg" ) ]
});

做网站|网站建设，就上易助科技网

前端技术文档及相关资料下载

关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载！

简介

使用

1. 引入 picturefill.js 文件

2. HTML

3. 调用

相关链接