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

Question

我有一堆服务器端生成的图像，其中包含以下HTML标记：

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

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

加载图像后，图标当然会消失，并且编辑器设置为我在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")
                    });