Question

我有一些带有<picture>元素的HTML，如果可能的话会加载一个WebP URL，然后再回到jpeg：

<div id='placeA'>
</div>

<div id='placeB'>
  <picture>
    <source type="image/webp" 
            srcset="http://www.wpclipart.com/animals/bugs/butterfly/butterfly_4/Monarch_butterfly_USGS.webp">
    <img src="http://www.clipartbest.com/cliparts/9cz/MMn/9czMMnpcE.jpeg" alt="A butterfly.">
  </picture>
</div>

使用javascript，我会从<img>元素中删除<picture>元素并将其放在'placeA'中：

document.getElementById('placeA').appendChild(
    document.querySelector('picture img'));

但是，该图片仍会在Chrome中显示WebP变体。我认为从图片元素中删除图像会将图像与源集分开，但显然不是。此行为是否与W3C规范一致？

小提琴演示：http://jsfiddle.net/cqhfpcew/1/

Answer 1

好问题。答案几乎肯定不是，只是因为行为会令人惊讶。要准确确定规范中的内容并不容易，但<img> element's description表示每当发生各种DOM突变事件时图像必须update the image data，其中一个被称为"The element is inserted into or removed from a picture parent element."这是你的测试用例。所以这似乎是一个Chrome错误。

Answer 2

这里的问题可能是您没有从picture标记中删除图片，只是将对它的引用复制到另一个页面元素#placeA中？

可能需要这样的东西......

// references to on-page elements
var placeA = document.getElementById('placeA');
var pictureIMG = document.querySelector('picture img');

// save image file location into a variable
var pictureIMGsrc = pictureIMG.src;

// create a image element with this src
var newIMG = document.createElement('img');
newIMG.src = pictureIMGsrc;

// remove image from picture tag
pictureIMG.parentNode.removeChild(pictureIMG);

// add image to #placeA element
placeA.appendChild(newIMG);

从<picture>元素重新定位<img/>后的预期行为？

2 个答案: