Chrome 中的流体图像：如何避免重绘？

发布于 2024-12-16 01:00:51 字数 233 浏览 6 评论 0原文

我正在一个有很多图像的摄影网站上工作，它们没有固定的高度和宽度，因为我希望这个网站 100% 流畅：你如何解决丑陋的 Chrome 重新绘制图像的问题？（即图像首先以零高度显示，然后在整个布局中移动到最终尺寸）

我已经尝试了几乎所有方法，我的最后一个选择是用黑色 div 隐藏图像重绘，然后将其不透明度设置为 0当图像加载完成时（顺便说一句，我已经通过 (document).ready 调用尝试过此操作，但似乎太早了：你会怎么做？）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

似梦非梦 2024-12-23 01:00:51

指定图像的高度和宽度属性/尺寸。

<img src="img.jpg" width="125" height="60" alt="My First Photograph ever">

这有助于浏览器避免第二次布局页面，并优化页面加载！ <代码>:)

Specify your image's height and width attribute / its dimensions.

<img src="img.jpg" width="125" height="60" alt="My First Photograph ever">

This helps the browser avoid a second pass to layout your page and it optimizes page load as well! :)

回复收藏 0 原文

冷月断魂刀 2024-12-23 01:00:51

Chrome（或任何浏览器）无法避免这种“重新绘制”，因为它们不知道您的图像的大小。

因此，您需要在图像宽度和高度属性本身中或通过 CSS 显式指定图像的大小。

回复收藏 0 原文

十年不长 2024-12-23 01:00:51

我知道我迟到了两年多，但是建议的做法怎么样

<div class="embed-container ratio-16-9">
      <img src="imgage.jpg"/>
</div>


.embed-container {
    position: relative;   
    height: 0;
    overflow: hidden;
    background-color:black;  
}

.ratio-16-9{
    padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
    padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
padding-bottom:100%; /* ... */

另外，评论部分的一个重要评论需要注意并改进原始技术：

不错的技巧。但是，如果我是你，我会将“img”标签替换为
div 上的背景图像（和背景大小：封面或
包含）。这将避免你的位置技巧，溢出技巧，
以及浏览器的大量工作。

我希望有人会觉得这很有用。

I know I am more than two years late, but how about the practice suggested here?

<div class="embed-container ratio-16-9">
      <img src="imgage.jpg"/>
</div>


.embed-container {
    position: relative;   
    height: 0;
    overflow: hidden;
    background-color:black;  
}

.ratio-16-9{
    padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
    padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
padding-bottom:100%; /* ... */

Also, an important remark from the comments section to pay attention to, and improve upon the original technique:

Nice trick. However, if I was you, I would replace the "img" tag with
a background image on your div (and background-size: cover or
contain). That would avoid you the position trick, the overflow trick,
and a lot of work for the browser.

I hope someone will find this useful.

回复收藏 0 原文

过去的过去 2024-12-23 01:00:51

这很难测试，但

img {display: block; width: 100%; height: auto;}

如果你希望图像是全宽的，你可以尝试在 CSS 中设置宽度/高度。这可能会阻止整页重新绘制，但当然，无论图像加载如何，都会进行一些重新绘制。您还可以调查 Chrome 的 --show-paint-rects

希望有帮助

It’s hard to test, but you could try setting width/height in CSS

img {display: block; width: 100%; height: auto;}

if you want the images to be full-width. This might prevent a full-page repaint, but of course there’ll be some repaint regardless as images load. You can also investigate what’s happening with Chrome’s --show-paint-rects

Hope that helps

回复收藏 0 原文

~没有更多了~