如何使用Picturefill

Question

我正在尝试为我的网站使用picturefill，但两个版本似乎都不起作用。

在我的页面头部：

<script src="js/picturefill.js"></script>

我有两个图像，较大图像的welcome.jpg和较小图像的welcome_sm.jpg：

<span data-picture data-alt="Welcome to Novus Landscapes">
<span data-src="images/welcome_sm.jpg"></span>
<span data-src="images/welcome.jpg" data-media="(min-width: 58em)"></span>
<noscript>
<img src="images/welcome_sm.jpg" alt="Welcome to Novus Landscapes">
</noscript>
</span>

要让它正常工作，我还需要做些什么吗？我看不到任何东西，因为在我的浏览器上启用了Javascript，这当然消除了由于noscript标签而导致的后退。

我做错了什么？

我的网站是novuslandscapes .com

谢谢,

约翰

Answer 1

有几件事你需要做。

在</body>之前，

1. 阅读或观看html底部的脚本

尝试此语法，从here复制

<article>
<img
     src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/small.png"
     srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/large.png 1280w,
             https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/medium.png 640w,
             https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/small.png 320w"
     sizes="(min-width: 500px) 50%, 100%"  
     alt="A woman reading">
</article>