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

Question

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

这只发生在firefox中。 Chrome和其他浏览器加载的图片没有任何边框和标题，看起来更“干净”。用语言来说，firefox生成的这些边框很难看。

我可以删除它，用装载机或类似的东西替换？我尝试使用background-image添加css loader：url（）...认为这些边框不可见，但是，它们仍然存在。

像pinterest，dribbble和其他网站如何提供图像而不在Firefox中生成边框？

谢谢

Answer 1

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

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

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

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