Border and Title showing while Image loading in Firefox

Question

I have a problem with firefox. On my website I have many images. When I browse through pages in Firefox, border and image title is visible while image is loading. Once it finishes downloading, this border/title disappears and is replaced with an image.

This happens only in firefox. Chrome and other browsers load images without any borders and titles which looks much 'cleaner'. In words, these borders produced by firefox are ugly.

Can I remove that, replace with an loader or something of this sort? I tried adding css loader with background-image:url()... thinking these borders won't be visible, however, they are still there.

How do sites like pinterest, dribbble and others deliver images without producing border in firefox?

Thank you

Border in Firefox while image is loading

LoveAndCoding · Accepted Answer · 2012-11-23T03:31:48.710

24

You can use the :-moz-loading psuedo-class to set it to not appear. Something like this should work:

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

An alternative to this is something like an AJAX loading script, which will load the image in the background and display a loading dialog, or animation. There are a lot of techniques for doing this, and searching here or on Google should prompt many many many results on how to do this effectively.

edited Nov 23 '12 at 03:31

answered Nov 23 '12 at 02:58

LoveAndCoding

7,857
2
31
55

By the page cited, the pseudo-class does *not* match elements in the process of loading, so it would not remove the phenomenon for a largish image that takes time to load. – Jukka K. Korpela Nov 23 '12 at 07:17
@JukkaK.Korpela Yes, that is correct. But what that is referring to is after data has started arriving, this psuedo-class will no longer apply. During the time when the image request has received no response yet, and there is no image data to display (and will instead show the alt text/border), this will apply. – LoveAndCoding Nov 23 '12 at 18:11

score 1 · Answer 2 · answered Jul 20 '13 at 22:18

You don't need to explicitly wait for load using CSS. You can do this in javascript as well.

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

Border and Title showing while Image loading in Firefox

2 Answers2

Linked