Question

我知道有类似的问题，所有这些都是陈旧的，我想知道可能有更新的技术。

我有以下HTML：

<figure class="main-slider__slide">
<img class="main-slider__image" src="http://smth.com/a.jpg" alt="test">
</figure>

我需要的是figure容器在img尚未加载的情况下为@mixin image-placeholder($x,$y, $image-wrapper-class,$image-class) { .#{$image-wrapper-class} { position: relative; padding-bottom: percentage($y/$x); } .#{$image-class} { position: absolute; } }保留空间。如果没有容器保留空间，我最终会感觉到抽搐的内容很糟糕。

到目前为止，我已经提出了以下SASS mixin：

@include image-placeholder(1170, 405, main-slider__slide, main-slider__image);

像.main-slider__slide { position: relative; padding-bottom: 34.61538%; } .main-slider__image { position: absolute; }一样应用它会生成类似

的CSS

{{1}}

问题是我必须在样式中硬化我的图像大小，并为每个具有特定尺寸的图像分别设置一个类。你们知道更好的解决方案，一个普通的占位符类可以解决问题吗？

Answer 1

正如我上面写的评论 - 我怀疑有一般解决方案可以让你获得有关尚未加载的元素的信息。

然而，有可能模仿这种行为。

要记住的一件事是将要加载的图像的微小尺寸调整版本内联到文档中，然后在页面加载时替换为实际图像。例如。您的1170x405图像可以被20x因子压缩到50x20，这将为您提供~1kb的jpeg图像大小。此图像可以<img src="data:" class="image-placeholder">直接存储到文档中，并作为实际图像的临时替代。您可以使用CSS将其缩放到原始大小，并通过JavaScript加载原始图像，或允许浏览器加载它而不显示或将其直接放在占位符上。将filter: blur(10px)或类似的东西应用于图像占位符也很有用，因此它看起来不会很难看。实际上，您甚至可以为此过滤器值设置动画，以便从按比例缩小的占位符向原始图像提供令人愉悦的视觉过渡。

我已经将这种方法用于我的一个项目中并且运行良好。

希望它会对你有所帮助。

图像在其容器上的纵横比

1 个答案: