Html5 图片元素

Question

>我有以下代码，我正在将其用于图像库，但无法使其工作：

<picture>
<source srcset="/web/gallery/17/1567772625.webp" type="image/webp"> 
<source srcset="/web/gallery/17/1567772625.jpg" type="image/jpg"> 
<source srcset="/web/gallery/17/1567772625-thumb.webp" type="image/webp"> 
<source srcset="/web/gallery/17/1567772625-thumb.jpg" type="image/jpg"> 
<a class="mg-image-wrap" data-title="Snaps From The Resort" href="/web/gallery/17/1567772625.jpg">
<img alt="Snaps From The Resort" class="mg-image" data-position="0" src="/web/gallery/17/1567772625-thumb.jpg" />
</a>                                             
</picture>

但是，如果我将代码更改为以下内容：

<picture>
<source srcset="/web/gallery/17/1567772625-thumb.webp" type="image/webp"> 
<source srcset="/web/gallery/17/1567772625-thumb.jpg" type="image/jpg"> 
<img  src="/web/gallery/17/1567772625-thumb.jpg" />
</picture>

我有两个问题：

1. 我怎样才能使第一个块下载webp，在支持的地方，特别是缩略图被下载为jpg？
2. 如何防止href图像在用户点击href链接之前无法下载？

Answer 1

图片元素

好吧，首先，<picture>内只允许<source>和<img>元素.这意味着如果希望它链接到某个地方，您应该将图片包装在锚标记中或在图片上使用 javascript 单击处理程序。

<a href="#">
<picture>...</picture>
</a>

使用韦伯

应将<picture>视为具有多个属性的单个元素，就像任何其他图像一样。这意味着缩略图和图库图像是分开的，并使用JS来交互/更改"可见"图像。

基本上，浏览器会抓取与其能力相匹配的第一个图像。(这就是为什么 img 标签是最后一个(

您可以使用media-queriesBUT 在picture元素内指定不同大小的图像，但这些图像旨在根据布局大小加载不同的图像，而不是针对不同的交互/用例。

例：

<picture>
<source srcset="imageOne.jpg" type="image/jpg" media="(min-width: 1400px)">
<source srcset="mediumImg.jpg" type="image/jpg" media="(min-width: 800px)">
<source srcset="smallImg.jpg" type="image/jpg" media="(min-width: 400px)">  
<img  src="fallback.jpg" />
</picture>

这将导致设备根据设备宽度加载不同的图像...

---

您还可以像添加任何其他图像一样直接在图片标签上添加任何其他属性。

<picture class="mg-image" data-position="0" >
...
</picture>