加载= chrome中的“延迟”问题

4dc9hkyq 于 2022-12-16 发布在 Go

关注(0)|答案(1)|浏览(178)

我有一些图片可以本机延迟加载。在chrome中，它可以离线工作，但不能在线。如果我使用loading=“lazy”，一些（但不是全部）图片不会显示。第一张图片会显示，第二张不会，依此类推。这真的很奇怪，因为我现在使用它已经几年了，没有任何问题。我希望得到一些提示。

`<div class="item">
    <a href="./about.html">
        <h1>Über mich</h1>
        <picture>
            <source type="image/webp" 
                    srcset="./anna_im_affe_IMG_5482_600.webp 600w,
                            ./anna_im_affe_IMG_5482_1000.webp 1000w" 
                    sizes="(max-width: 800px) 600px,
                            (min-width: 700px) 1000px,
                            (min-width: 900px ) 600px">
            <img srcset="./anna_im_affe_IMG_5482_600.jpg 600w,
                        ./anna_im_affe_IMG_5482_1000.jpg 1000w"
                    sizes="(max-width: 800px) 600px,
                            (min-width: 700px) 1000px,
                            (min-width: 900px ) 600px"
                    src="./anna_im_affe_IMG_5482_1000.jpg" alt="xxxx" loading="lazy" width="100%" height="auto">
        </picture>
    </a>
</div>
<div class="item">
    <a href="./kuratierung.html">
        <h1>Kuratierung</h1>
        <picture>
            <source type="image/webp" 
                    srcset="./Unter-Strom-140320-083_semper_600.webp 600w,
                            ./Unter-Strom-140320-083_semper_1000.webp 1000w" 
                    sizes="(max-width: 800px) 600px,
                            (min-width: 700px) 1000px,
                            (min-width: 900px ) 600px">
            <img srcset="./Unter-Strom-140320-083_semper_600.jpg 600w,
                        ./Unter-Strom-140320-083_semper_1000.jpg 1000w" 
                    sizes="(max-width: 800px) 600px,
                            (min-width: 700px) 1000px,
                            (min-width: 900px ) 600px" 
                src="./Unter-Strom-140320-083_semper_1000.jpg" alt="xxx" loading="lazy" width="100%" height="auto">
        </picture>
    </a>
</div>`

字符串

google-chrome

来源：https://stackoverflow.com/questions/71010518/loading-lazy-problems-in-chrome

1条答案

按热度按时间

zpqajqem1#

设置height="auto"而不是指定实际的图像高度默认为零高度，直到图像实际加载。这似乎会导致Chrome和Chromium浏览器有时无法检测图像交叉点，导致根本无法加载图像的问题，如Issue with loading images on Chrome browser v 75中所述，我仍然可以在Chrome 108中重现。
如果你知道实际的图像大小，你应该相应地设置width和height属性。这样做也可以防止布局偏移，如Set height of image with 100% width for CLS中所讨论的。你可以使用CSS来改变显示大小。

<img srcset="./Unter-Strom-140320-083_semper_600.jpg 600w,
               ./Unter-Strom-140320-083_semper_1000.jpg 1000w" 
       sizes="(max-width: 800px) 600px,
              (min-width: 700px) 1000px,
              (min-width: 900px ) 600px" 
       src="./Unter-Strom-140320-083_semper_1000.jpg"
       alt="xxx"
       loading="lazy" 
       width="100%" 
       height="auto">

.item img {
  width: 100%;
  height: auto;
}

为了防止延迟加载问题，即使在不知道原始图像大小或比例的情况下，也可以指定最小高度1px。

.item img {
  width: 100%;
  height: auto;
  min-height: 1px;
}

赞(0）回复(0）举报 2022-12-16

我来回答

加载= chrome中的“延迟”问题

1条答案

相关问题

热门标签

最新问答