CSS 在等待加载完整图像时占位符背景/图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14748750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placeholder background/image while waiting for full image to load?
提问by Richard
I have a few images on my page. I'm finding that the page starts to render before the images have been loading (which is good), but that the visual effect is not great. Initially the user sees this:
我的页面上有几张图片。我发现页面在图像加载之前开始呈现（这很好），但视觉效果不是很好。最初用户看到的是：
--------hr--------
text
Then a few milliseconds later the page jumps to show this:
然后几毫秒后页面跳转以显示：
--------hr--------
[ ]
[ image ]
[ ]
text
Is there a simple way that I can show a grey background image of exactly the width and heightthat the image will occupy, until the image itself loads?
有没有一种简单的方法可以显示图像将占据的宽度和高度的灰色背景图像，直到图像本身加载？
The complicating factor is that I don't know the height and width of the images in advance: they are responsive, and just set to width: 100%of the containing div. This is the HTML/CSS:
复杂的因素是我事先不知道图像的高度和宽度：它们是响应式的，并且只是设置为width: 100%包含 div 的。这是 HTML/CSS：
<div class="thumbnail">
<img src="myimage.jpeg" />
<div class="caption">caption</div>
</div>
img { width: 100% }
Here's a JSFiddle to illustrate the basic problem: http://jsfiddle.net/X8rTB/3/
这是一个 JSFiddle 来说明基本问题：http: //jsfiddle.net/X8rTB/3/
I've looked into things like LazyLoad, but I can't help feeling there must be a simpler, non-JS answer. Or is the fact that I don't know the height of the image in advance an insurmountable problem? I do know the aspect ratio of the images.
我已经研究过LazyLoad 之类的东西，但我不禁觉得必须有一个更简单的非 JS 答案。或者我事先不知道图像的高度是一个无法解决的问题？我知道图像的纵横比。
回答by Neil Myatt
Instead of referencing the image directly, stick it within a DIV, like the following:
不要直接引用图像，而是将其粘贴在 DIV 中，如下所示：
<div class="placeholder">
<div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>
Then in your CSS:
然后在你的 CSS 中：
.placeholder {
width: 300;
height: 300;
background-repeat: no-repeat;
background-size: contain;
background-image: url('my_placeholder.png');
}
回答by Punit S
Keep in mind - the answers above that recommend using div background approach will change the semantic of your image by turning it from img into a div background. This will result in things like no indexing of these images by search crawler, delay in loading of these images by browser (unless you explicitly preload them), etc.
请记住 - 上面推荐使用 div 背景方法的答案将通过将图像从 img 转换为 div 背景来改变图像的语义。这将导致诸如搜索爬虫没有索引这些图像、浏览器加载这些图像延迟（除非您明确预加载它们）等。
A solution to this issue (while not using div background approach) is to have a wrapper div to your image and add padding-top to it based on the aspect-ratio of the image that you need to know in advance. Below code will work for image with aspect ratio of 2:1 (height is 50% of width)
此问题的解决方案（虽然不使用 div 背景方法）是为您的图像添加一个包装 div，并根据您需要提前知道的图像的纵横比向其添加 padding-top。下面的代码适用于纵横比为 2:1（高度为宽度的 50%）的图像
<div style="width:100%;height:0; padding-top:50%;position:relative;">
<img src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;">
</div>
Of course - the major disadvantage of this approach is that you need to know the aspect ratio of image in advance.
当然 - 这种方法的主要缺点是您需要提前知道图像的纵横比。
回答by Neil Myatt
There is a really simple thing to check before you start looking into lazy-loading and other JS. Make sure the JPG images you are loading are saved with the 'progressive' option enabled! This will cause them to load the image iteratively, starting with a placeholder that is low-resolution and faster to download, rather than waiting for the highest res data before rendering.
在开始研究延迟加载和其他 JS 之前，有一件非常简单的事情需要检查。确保您正在加载的 JPG 图像在启用“渐进式”选项的情况下保存！这将导致它们以迭代方式加载图像，从低分辨率且下载速度更快的占位符开始，而不是在渲染之前等待最高分辨率数据。
回答by Sinan Ergin
It's very simple.. This scenario allows to load profile photo that default placeholder image. You could load multi css background-image into an element. When avatar photo fails, the placeholder image appears default of div.
这很简单.. 这个场景允许加载默认占位符图像的个人资料照片。您可以将多个 css background-image 加载到一个元素中。当头像照片失败时，占位符图像显示为div的默认值。
If you're using a div element that loads via css background-image, you could use this style:
如果您使用的是通过 css background-image 加载的 div 元素，则可以使用以下样式：
#avatarImage {
background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>
回答by Shreyas Gaonkar
Here's one naive way of doing it,
这是一种天真的方法，
img { box-shadow: 0 0 10px 0 rgba(#000, 0.1); }
img { box-shadow: 0 0 10px 0 rgba(#000, 0.1); }
You can manipulate the values, but what it does is it creates a very light border around the image that doesn't push the contents. Images can load at whatever time they want, and you get a good user experience.
您可以操纵这些值，但它的作用是在图像周围创建一个非常轻的边框，不会推动内容。图像可以随时加载，您将获得良好的用户体验。
Hope that it helps
希望它有帮助
回答by Luca
The only thing I can think of, to minimize the jump effect on your text, is to set min-heightto where the image will appear, I would say - set it to the "shorter" image you know of. This way the jump will be less evident and you won't need to use lazyLoad or so... However it doesn't completely fix your problem.
我唯一能想到的，要尽量减少对文本的跳跃效果，就是设置min-height图像出现的位置，我想说 - 将其设置为您知道的“较短”图像。这样跳转将不那么明显，你不需要使用lazyLoad左右......但是它并不能完全解决你的问题。
回答by Selim Reza
#avatarImage {
background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>
