0

我有一个包含许多缩略图的网站。缩略图定义如下：

<li>
    <a href='Pic/$gal/sized/$file'>
        <img src='Pic/$gal/thumb/$file' alt=''></img>
    </a>
</li>

以及影响它们的 CSS：

全局 img-CSS：

img {
    display: block; 
    margin: 0; 
    padding: 0; 
    border: none; 
    background: url('../images/load.gif') no-repeat center;
}

缩略图的特殊 CSS 代码：

.gallery ul li img {    
    width: 174px;
    height: 174px;
    padding: 4px;   
    border: 1px solid #FFFFFF;      
}

我想使用背景图像作为加载图标。但正如您在下图中看到的那样，缩略图的左上方总是有一个丑陋的图标，直到图片完全加载。我尝试使用与缩略图本身一样大的背景图像，因此丑陋的图标会重叠。但这不起作用。

http://s7.directupload.net/images/130225/v3l3hkfs.png

你有什么想法，我怎样才能删除这个图标？

问候，奥利弗

4

3 回答 3

3

这些是浏览器生成的，因此您无法摆脱它们，图标将取决于所使用的浏览器。为了不让它们显示，您需要使用 javascript 将图像从画布上渲染出来或进行某种预加载。

于 2013-02-25T17:56:34.273 回答
2

您可以添加空白 .png 或 .gif 作为图像源，然后在加载图像后更改 src。

编辑：存储原始 src 的一个好方法是使用 data 属性：

<img data-src='Pic/$gal/thumb/$file' src='blank.png' alt='' />
于 2013-02-25T18:02:12.560 回答
0

非常感谢您的猛烈抨击！

我创建了一个 1px 乘以 1px 透明的空白.png，然后我修改了我的 HTML 标签：

echo "<li><a rel='gallery_group' href='Pic/$gal/sized/$file'><img data-src='Pic/$gal/thumb/$file' src='images/blank.png' alt=''></img></a></li> ";

如您所见，blank.png 是图像源。blank.png 的加载速度非常快，因为它是一张非常小的图片。我的下一步是确保在加载页面后加载真实图像。

为此，我编写了一个简单的 javascript 函数，将图像的所有“src”属性更改为“data-src”属性的值：

<script type="text/javascript" 
function neueSrc () {
    var all = document.getElementsByTagName("img");
    for (var i=0, max=all.length; i < max; i++) {   
        all[i].src = all[i].getAttribute('data-src');
    }
}
</script>

该函数在 body-tag 中执行：

<body onload="neueSrc()">

这正是我想要的！非常感谢您的快速回复和有用的帮助。

于 2013-02-26T09:34:39.377 回答