Question

i 在实际图像被下载之前,该法典将装上我的图像。

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

这一工作表明,在图像下载之前,我装满一孔,但也显示背景。

我的原始形象就是:

<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

如你在左边看到的那样,你看看看不到多少 a子的载荷,也看着周围的缺失形象。

是否有任何建议?

Answer 1

见。 http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2 ,其中界定:<img> tag必须具备src属性。

缺失的广场将按<代码>src的属性:<img>。如果不打上有效形象的URL,你就会打上“中间形象”框架。将斜体而不是背景(或将其置于透明的形象)或改为“条码”和“条码”;

无效:src Depende = “broken concept” icon:

<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)" />

在你的耳光之后,我可以看到你正确做,问题就是要花很长时间才能下载图像。在此情况下,你有几种选择:

If you have control over the images, make them load progressively (save GIF/PNG as interlaced, JPEG as progressive).
If you don t have control over the images, wrap the img hidden in a span, apply the background image to the span element and show the image when the load event fires.

注

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

j 质量,如:

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

友情链接