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

Question

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

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

我可以删除它，用装载机或类似的东西代替吗？我尝试使用 background-image:url()... 添加 css 加载程序，认为这些边框不可见，但是，它们仍然存在。

pinterest、dribbble 等网站如何在 Firefox 中提供图片而不产生边框？

谢谢

Answer 1

您可以使用:-moz-loading 伪类将其设置为不出现。像这样的东西应该工作：

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