3

I've used Picturefill to load a couple of images on my web page. They display correctly in Chrome but don't display at all in Internet Explorer 8.

Here is a sample of my code:

<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/modernizr.custom.11641.js"></script>
<script async="true" src="js/picturefill.js"></script>
<script src="js/respond.js"></script>
</head>

<body>
<div class="wrapper">
    <header class="x-padding inside-b-padding">
        <h1 class="nocontent outline">Baseball for Busy
        People</h1>


    <picture class="logo">
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source srcset="images/logo.png" media="(min-width: 750px)">
        <!--[if IE 9]></video><![endif]-->
        <img srcset="images/logo-small.png" alt="Baseball for Busy People">
    </picture>

(I'm including the top part in case my file linking is part of the problem).

I can view the demo in IE 8: http://scottjehl.github.io/picturefill/examples/demo-02.html. But the images on my page aren't working.

Here is what I tried:

  1. I copied and pasted the code from the demo into my page (changing the image paths to absolute) - they did not display.
  2. I added script to create a <picture> element (although I'm using Modernizr, so it should not be needed).

  3. I added a src path to the img tag, which worked, but I read that Picturefill doesn't recommend this.

4

1 回答 1

6

我知道这个问题很久以前就被问过了，但也许这会对遇到类似问题的其他人有所帮助。我遇到了同样的问题，即 Picturefill 图像没有在我的网站上加载到本机不支持它的浏览器（例如 IE9 - IE11）中。修复是确保在将元素添加到页面时调用 picturefill()（我在 Angular 的指令中调用它，在 React 中调用 componentDidMount）。

于 2016-05-13T15:38:11.203 回答