在使用 CSS 加载或破坏图像源时操作图像占位符

Posted 2023-03-05

【中文标题】在使用 CSS 加载或破坏图像源时操作图像占位符

【英文标题】：Manipulate image placeholder while image source is being loaded or broken using CSS

【发布时间】：2014-05-31 15:58:53

【问题描述】：

在加载图像之前，它会显示一个带边框的图像占位符，该边框无法删除。所以我想隐藏或替换默认图片占位符。

我正在寻求避免使用 javascript 代码的纯 CSS 解决方案。

我当前的 CSS 如下所示：

img 
    width: 50px;
    height: 50px;
    border: 1px solid #f4f4f4;
    border-radius: 25px;

    -webkit-background-clip: border-box;
    -moz-background-clip: border-box;
    background-clip: border-box;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

这是jsFiddle，其中第一张图片已损坏，其占位符可见，因此很烦人，因为它扭曲了原始图片边框。

我尝试了什么

我已尝试使用 content 技巧来完全删除占位符，但如果实际图像没有损坏并且应该显示，那也会删除它。

display: inline-block;
content: "";

有人有解决办法吗？

【参考方案1】：

也许只是隐藏它？

img
  ::-webkit-input-placeholder  color:transparent; 
  ::-moz-placeholder  color:transparent;  /* firefox 19+ */
  :-ms-input-placeholder  color:transparent;  /* ie */
  input:-moz-placeholder  color:transparent; 

【参考方案2】：

通过背景图片提供图片：url(srctoimg);比 src='srctoimg'

<img style='background-image: url(srctoimg);'>
img 
display: block;
background: white;
content: "";
background-size: 100%;
text-indent: -999px

Fiddle Demo

【参考方案3】：

@maak 已经在下面回复了相同的答案

为FF

-moz-force-broken-image-icon: <integer>;

是一个扩展的 CSS 属性。

例子

img 
  -moz-force-broken-image-icon: 1;
  height:100px;
  width:100px;


<img src='/broken/image/link.png' alt='Broken image link'>

Read Here

对于其他浏览器我不确定这样的属性，但是一个 jquery 虽然你想避免它

// Replace source
$('img').error(function()
        $(this).attr('src', 'missing.png');
);

// Or, hide them
$("img").error(function()
        $(this).hide();
);

【讨论】：

错误处理并不是一个真正的选择。不是因为它是 javascript，而是因为它执行到了进程的后期。页面加载时，浏览器显示图像占位符，然后加载图像。加载失败后，将执行 onerror 处理程序。更好的方法是结合我的 trick 和加载处理程序，它会使用适当的设置删除 CSS 类，以便显示图像......

【参考方案4】：

恐怕没有纯 CSS 的解决方案。 CSS 无法确定加载和卸载的图像。

但浏览器确实可以。

例如，Firefox 有一些你可以give a try 的东西。 但现在说得太详细了……

我修改了你的小提琴并插入了

到您的图像。

在 Firefox 中，损坏的图像消失了，因为浏览器现在呈现 alt-text。

再见：m​​aak。