在Firefox中加载图像时显示边框和标题

Question

我对firefox有一个问题。在我的网站上我有很多图片。当我在Firefox中浏览页面时，在加载图像时可以看到边框和图像标题。下载完成后，此边框/标题将消失，并替换为图像。

这只会在firefox中发生。Chrome和其他浏览器加载的图像没有任何边框和标题，看起来更“干净”。换句话说，firefox产生的这些边框是丑陋的。

我能把它去掉吗，换成加载器或类似的东西？我尝试使用background-image:url()添加css加载器...然而，考虑到这些边界将是不可见的，它们仍然存在。

像pinterest，dribbble和其他网站是如何在firefox中不产生边框的情况下提供图片的？

谢谢

​

​

Answer 1

您可以使用:-moz-loading psuedo-class将其设置为不显示。像这样的东西应该是有效的：

img:-moz-loading {
    visibility: hidden;
}

另一种方法类似于AJAX加载脚本，它将在后台加载图像并显示加载对话框或动画。有很多技术可以做到这一点，在这里或在谷歌上搜索应该会提示许多关于如何有效地做到这一点的结果。

Answer 2

您不需要显式地等待使用CSS加载。你也可以在javascript中做到这一点。

    var img = document.getElementById("some-image");
    img.style.display = "none";
    //...
    //add to dom etc...
    //..
    img.onload = function () {
        img.loaded = true;
        img.style.display = "inherit";
    }