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

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

• javascript
• css
• loader

2 Answers 2

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.

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