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

我有一大堆的服务器端的生成与下面的HTML标签图片：如何阻止图像在加载时显示“空白文档”图标？

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

的问题是，在图像显示默认的“空白文档”（或“丢失图像”）图标和边界，同时他们正在加载。它看起来像这样：图像加载

后，当然图标消失，鲍德尔被设置为我在CSS中指定的一个。

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

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

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

WITH A替代方法

更新我注意到，如果我不指定宽度和高度，而图像加载不显示的默认缺少的图标和边框。作为一种变通方法，我做了以下内容：

<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>。

来源

2013-08-07 JustAMartin

-1

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

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

来源

2013-08-07 10:19:50

无论是否加载它们，都会在两种情况下显示缺失图标。在图片加载过程中，alt属性不会删除“丢失”图标。 – JustAMartin

-1

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

来源

2013-08-07 10:32:06

在我的情况下，错误处理，因为图像是在最后加载就好了不会被触发。它只需要一些时间来加载它，并且在加载期间，“缺失”图标是可见的。至少，在Mozilla Firefox浏览器。 – JustAMartin

每个浏览器都显示破碎的图标吗？无论哪种方式，你有没有试过这个jquery插件：Imagesloaded？它可能有助于你的情况。

来源

2013-08-07 12:56:13 user2513484

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

回答

相关问题