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

【问题标题】：Border and Title showing while Image loading in Firefox在 Firefox 中加载图像时显示边框和标题
【发布时间】：2012-11-11 10:22:01
【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

标签： javascript css loader

【解决方案1】：

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

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

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

【讨论】：

从引用的页面来看，伪类在加载过程中不匹配元素，所以不会消除大图加载耗时的现象.
@JukkaK.Korpela 是的，这是正确的。但这里指的是数据开始到达后，这个伪类将不再适用。在图像请求尚未收到响应且没有要显示的图像数据（而是显示替代文本/边框）期间，这将适用。

【解决方案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";
    }

【讨论】：