建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS响应式图片polyfill插件picturefill

来源:易助科技网浏览量:18收藏

简介


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


JS响应式图片polyfill插件picturefill-示例图



使用


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" ) ]});



相关链接


官网地址:http://scottjehl.github.io/picturefill/

GitHub 地址 :https://github.com/scottjehl/picturefill