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

【问题标题】：How to stop images from showing the "blank document" icon while they are loading?如何阻止图像在加载时显示“空白文档”图标？
【发布时间】：2013-08-08 16:05:32
【问题描述】：

我有一堆带有以下 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>，那就太好了。

【问题讨论】：

标签： html image loading

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

无论我是否异步加载它们，在这两种情况下都会显示丢失的图标。 alt 属性在图像加载期间不会删除“丢失”图标。

【解决方案3】：

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

【讨论】：

在我的情况下，错误处理程序没有被触发，因为图像在最后加载得很好。加载它只需要一些时间，并且在加载过程中，“丢失”图标是可见的。至少，在 Mozilla Firefox 中。