Question

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

<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;      
}

我想将background-image用作加载图标。但正如您在下图中看到的那样，缩略图左上方始终存在一个丑陋的图标，直到图片完全加载为止。我试图使用与缩略图本身一样大的背景图像，因此丑陋的图标将被重叠。但这不起作用。

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

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

此致奥利弗

Answer 1

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

Answer 2

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

编辑：存储原始src的好方法是使用数据属性：

<img data-src='Pic/$gal/thumb/$file' src='blank.png' alt='' />

Answer 3

非常感谢slamborne！

我创建了1px次1px transparent blank.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()">

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

恼人的载入图像（HTML / CSS）

3 个答案: