时间戳

首页 > 解决方案 > 为什么响应式图像不能以这种方式工作？

javascript - 为什么响应式图像不能以这种方式工作？

问题描述

我试图弄清楚响应式图像语法如何与lazysizes一起使用。有用。

这边走：

.border {
   border: solid 1px #ccc;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>
<picture>
    <source
        data-srcset="
            https://via.placeholder.com/150/150 1x,
            https://via.placeholder.com/300/150 2x,
            https://via.placeholder.com/450/150 3x
        "
        type="image/jpeg"
    >
    <img
        src="https://via.placeholder.com/150"
        width="150"
        height="150"
        data-src="https://via.placeholder.com/150/150"
        alt="Test Image"
        class="lazyload border"
    >
</picture>

但是不起作用...

这边走：

.border {
   border: solid 1px #ccc;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>
<picture>
    <source
        data-srcset="
            https://via.placeholder.com/300/150 2x,
            https://via.placeholder.com/450/150 3x
        "
    >
    <img
        src="https://via.placeholder.com/150"
        width="150"
        height="150"
        data-src="https://via.placeholder.com/150"
        alt="Test Image"
        class="lazyload border"
    >
</picture>

我只是不明白如果它已经在source element中写入过一次，那么在图像上重复data-src有什么意义。我不确定是否剪断了显示问题，您可能必须将数据粘贴到 HTML 以在浏览器上进行测试。

标签： javascripthtmllazy-loadingresponsive-images

解决方案

推荐阅读