首页 > 解决方案 > 本机浏览器延迟加载:如何为 100% 宽度的图像指定图像尺寸

问题描述

我在手风琴下拉菜单中遇到延迟加载问题,图像加载速度很慢,因此手风琴剪切了图像下方的文本。如果我可以指定图像尺寸以便 Chrome 等都知道如何正确布置手风琴,这可能不会发生。

这发生在本机延迟加载和lazysizes.min.js

它发生在我网站上的手风琴下拉菜单上

目前我已经使用loading="eager"了 Accordion 面板图像,但 Accordion 面板图像在页面的下方很远,我不希望浏览器急切地加载它们,因为用户可能永远无法访问图像或激活手风琴。

谷歌和网络专家说loading="lazyloading",如果指定图像尺寸,效果会更好。

但是许多图像基本上是其父列的 100%,或者大多数情况下我将图像保留为未指定的尺寸,因为它们需要为移动设备缩小而不是通过水平滚动来破坏视口。

那么如何为延迟加载指定<img/>标签高度和宽度尺寸,并且仍然使图像能够正确收缩以适应移动设备?

或者我是否需要关闭手风琴的延迟加载以确保浏览器正确显示其下拉菜单?

标签: htmlcsslazy-loading

解决方案


推荐阅读