占位符背景/图像在等待加载完整图像？
我的页面上有一些图像.我发现页面在图像加载之前开始渲染(这很好),但视觉效果并不好.最初用户看到这个:
--------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的答案.或者事实是我不知道图像的高度是一个不可逾越的问题？我知道图像的纵横比.
Nei*_*att 22
而不是直接引用图像,将其粘贴在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');
}
- 这依赖于非占位符图像不透明,不是吗？ (2认同)
这很简单...
此方案允许加载默认为占位符图像的个人资料照片。
您可以将多个 CSS 背景图像加载到元素中。当头像照片失败时，占位符图像默认显示为 div。
如果您使用的是通过 CSS 背景图像加载的 div 元素，则可以使用以下样式：
#avatarImage {
background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>
- 您的答案是关于图像无法加载，而OP是关于*加载时*显示的占位符图像。 (6认同)
- 好的！这似乎是相反的。如果两者都存在，则加载第一个指定的图像，因此第二个指定的图像应该是后备图像。因此，对您的答案的轻微更改将是“url("avatar-image.png"), url("place-holder-image.png");` (2认同)
- @UcheOzoemena，这正是我的目的，尽管我使用 3px 宽的数据 uri 作为占位符，它充分模仿了实际图像的梯度，但只有几个字节 (2认同)
请记住-上面建议使用div背景方法的答案将通过将图像从img转换为div背景来更改图像的语义。这将导致诸如搜索搜寻器不对这些图像进行索引，浏览器延迟加载这些图像（除非您明确地预加载它们）之类的事情。
解决此问题的一种方法（虽然不使用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>
当然-这种方法的主要缺点是您需要事先知道图像的纵横比。
- 这仅占用该区域，但不会按照OP的要求显示占位符背景图像。当图像本身包含透明区域时，简单地向容器 div 添加“背景图像”也是行不通的。 (2认同)
在开始研究延迟加载和其他JS之前，有一件非常简单的事情要检查。确保在启用“渐进式”选项的情况下保存正在加载的JPG图像！这将导致它们迭代加载图像，从分辨率较低且下载速度更快的占位符开始，而不是在渲染之前等待最高分辨率的数据。
- 我是html新手。如何启用“渐进”选项？ (2认同)
请随意复制此内容：
<script>
window.addEventListener("load", function () {
document.getElementById('image').style.backgroundColor = 'transparent';
});
</script>
<body>
<image src="example.example.example" alt="example" id="image" style="background-color:blue;">
</body>
我从这里得到这个：预加载器继续加载并且在加载内容时不会消失。
我唯一能想到的，为了最小化对文本的跳跃效果，就是设置min-height图像出现的位置，我想说 - 将其设置为您知道的“较短”图像。这样跳转将不那么明显，您不需要使用lazyLoad之类的...但是它并不能完全解决您的问题。