等待完整图像加载时占位符背景/图像？

我的网页上有几张图片。我发现页面在图像加载之前开始渲染（这很好），但是视觉效果并不好。最初，用户看到这样的：等待完整图像加载时占位符背景/图像？

--------hr-------- 
text

然后在几毫秒后，页面跳转到显示此：

--------hr-------- 
[   ] 
[ image ] 
[   ] 
text

有没有办法，我可以显示的灰色背景图像完全宽度的简单方法和高度图像将占用，直到图像本身加载？

复杂的因素是，我不知道图像的高度和宽度提前：它们是响应式的，只是设置为width: 100%包含div。这是HTML/CSS：

<div class="thumbnail"> 
<img src="myimage.jpeg" /> 
<div class="caption">caption</div> 
</div> 
img { width: 100% }

这里有一个的jsfiddle说明基本问题：http://jsfiddle.net/X8rTB/3/

我已经研究过类似的事情LazyLoad，但我不禁感到，必须有一个更简单，非JS答案。或者事实上，我不知道事先形象的高度是不可逾越的问题？我知道图像的宽高比。

来源

2013-02-07 Richard

做一个空div灰色背景和设定尺寸，然后添加图像作为'背景image'？ – Andy

试过如下，但它实际上并没有做任何事情：'ul.options li {background：url（/ media/img/cont/filler。PNG）;背景大小：100％100％; }' – Richard

Richard，不要使用列表项，使用div代替''，然后给它设置尺寸（'height：200px; width：300px;'），它应该可以工作 – Andy

为了尽量减少对文字的跳跃效应，我唯一能想到的就是将min-height设置为图像出现的位置，我会说 - 将它设置为您所知道的“较短”图像。这样，跳转就不那么明显了，你不需要使用lazyLoad等等......但是它并没有完全解决你的问题。

来源

2013-02-07 10:33:41 Luca

而不是图像直接引用的，将其粘贴一个DIV中，如下所示：

<div class="placeholder"> 
    <div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div> 
</div>

然后在你的CSS：

.placeholder { 
    width: 300; 
    height: 300; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-image: url('my_placeholder.png'); 
}

来源

2013-05-13 08:53:10

这依赖于非占位符图像不透明，不是吗？ – Medinoc

有一个非常简单的事情，你之前检查开始寻找懒惰加载和其他JS。确保您正在加载的JPG图像与“渐进式”选项一起保存！这将导致它们以低分辨率和更快下载的占位符开始迭代加载图像，而不是在渲染前等待最高res数据。

来源

2016-05-23 12:54:24

这里是做它的一个简单的方式，

IMG { 箱阴影：0 0 0 10px的RGBA（＃000，0.1）; }

您可以操纵这些值，但它所做的是在图片周围创建一个很轻的边框，而不会推送内容。图像可以随时随地加载，并且您可以获得良好的用户体验。

希望它有助于

来源

2016-08-18 16:27:56

一个不错的主意，但在实践中它不起作用。您可以使用从src =“http://placehold.it/150x150”加载的图像对其进行测试，因为它们的加载速度非常缓慢（免费服务，这就是原因）。由于DOM还没有分配任何大小的对象，因此box阴影只会呈现为一个小点（因为还没有任何“阴影”）。 – rmcsharry

等待完整图像加载时占位符背景/图像？

回答

相关问题