html - 如何阻止图像在加载时显示“空白文档”图标？

Question

我有一堆带有以下 HTML 标记的服务器端生成的图像：

<img width="75" height="75" src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1">

问题是图像在加载时显示默认的“空白文档”（或“缺失图像”）图标和边框。它看起来像这样：

加载图像后，图标当然会消失，并且 broder 被设置为我在 CSS 中指定的那个。

我不想创建花哨的预加载器什么的，但我想让这个“空白文档”图标和默认边框消失。尽管用户看到它不到一秒钟，但这仍然不好，因为它给人的印象是我的图像有问题。

加载图像时如何使该图标不显示？

一个想法是为图像设置背景，但我不能这样做，因为图像具有透明区域，然后在加载图像后背景的某些部分将可见。

使用变通方法更新

我注意到如果我不指定宽度和高度，则在加载图像时不会显示默认的缺失图标和边框。作为一种解决方法，我执行了以下操作：

<div class="imgholder"><img src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1"></div>

并按如下方式设置图像持有者的样式：

.imgholder {
            border: 2px solid #ddd;
            margin: 2px;
            padding: 2px;
            width: 75px; /* fixed dimensions - should match image sizes to avoid cropping */
            height: 75px;
            overflow: hidden; /* never show scrollbar */
            float: left;
        }

不过，如果有某种方式来设置加载图像本身的样式并摆脱该图像持有者，那就太好了<div>。

Answer 1

每个浏览器上都会显示损坏的图标吗？无论哪种方式，您是否尝试过这个 jquery 插件：Imagesloaded？它可能对您的情况有所帮助。

Answer 2

您可以使用替代文本属性。

一个问题是如何加载图像？使用异步调用加载或在页面加载时加载这些图像？

Answer 3

$("img").on({load:function(){},
                  error:function(){
                    $(this).attr("src","blank.png")
                    });