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

缺少的方格将取决于src标记的<img>属性。如果未将其设置为有效的图片网址，您将获得“已损坏的图片”框架。设置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元素，并在加载事件触发时显示图像。

例如：

<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', ''); 
});

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

1 个答案: