显示加载图像仍显示“浏览器加载图像”图标

Question

我有此代码运行加载我的图像所有异步并显示ajax加载图像，直到下载实际图像。

$('img.loadable-image').css('background', 'transparent url(/images/ajax-loader1.gif) no-repeat center center') 
$('img.loadable-image').load(function() { $(this).css('background', ''); }); 

这工作，因为它显示了我的AJAX加载图标，直到图像被下载，但它也显示了背景，以及

这里是我的原始图像的html：

<img class="loadable-image" src="mysite.com/validimage.jpg" border="0" height="50" width="50"> 

这里我得到的屏幕截图：

alt text http://img820.imageshack.us/img820/3289/ajaxload.png

，就像你在左边看到的那样，你会看到小的ajax装载程序，但是也会看到它周围丢失的图像。

有什么建议吗？

Answer 1

请参阅http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2，它定义<img>标记必须具有src属性。

丢失的方块将归因于<img>标记的src属性。如果它没有设置为有效的图片网址，则会显示“损坏的图片”框。设置src而不是背景（或将其设置为透明图像）或将其更改为<span>元素而不是<img>元素。

无效的，没有src属性== “破碎的形象” 图标：

<img alt="" style="width:50px; height:50px; background-image:url(bg.gif)" /> 

有效，与src属性：

<img alt="" src="transparent.gif" 
    style="width:50px; height:50px; background-image:url(bg.gif)" /> 

---

你的编辑后，我可以看到你”重新正确地做，问题是图像需要很长时间才能下载。在这种情况下，你有几种选择：

• 如果你有在图像上的控制，make them load progressively（保存GIF/PNG隔行扫描，JPEG为逐行扫描）。
• 如果您无法控制图像，请将隐藏在图层中的img包裹起来，将背景图像应用于span元素，并在load事件触发时显示图像。

例：

<span class="loadable-image-container"> 
    <img class="loadable-image" src="mysite.com/validimage.jpg" 
     border="0" height="50" width="50"> 
</span> 

jQuery的，是这样的：

$('img.loadable-image-container') 
    .css('background', 
     'transparent url(/images/ajax-loader1.gif) no-repeat center center') 
    .children().css('visibility', 'hidden'); 

$('img.loadable-image').load(function() { 
    $(this) 
     .css('visibility', 'visible') 
     .parent().css('background', ''); 
});