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

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

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

缩略图的特殊css代码：

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

我想使用背景图像作为加载图标。但正如您在下图中所看到的，在图片完全加载之前，缩略图的左上角总是有一个丑陋的图标。我尝试使用与缩略图本身一样大的背景图像，这样丑陋的图标就会重叠。但这是行不通的

你知道我如何删除这个图标吗

问候,，

---

Oliver

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

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

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

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

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

---

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

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

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

---

非常感谢slamborne

我创建了一个1px乘以1px透明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> ";

echo“
”；

正如你所看到的，BNACK.PNG是图像源。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>

---

非常感谢slamborne

我创建了一个1px乘以1px透明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> ";

echo“
”；

正如你所看到的，BNACK.PNG是图像源。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>

不客气。我知道这不是背景图像，但我只是把它扔出去，因为这是一个很难追踪的问题。我以前使用1x1像素图像作为背景图像时遇到过问题，所以我习惯使用2x2像素图像作为最小尺寸。不客气。我知道这不是背景图像，但我只是把它扔出去，因为这是一个很难追踪的问题。我在过去使用1x1像素的图像作为背景图像时遇到了一些问题，因此我养成了使用2x2像素图像作为最小尺寸的习惯。