Border and Title showing while Image loading in Firefox

问题

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

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/13522532/border-and-title-showing-while-image-loading-in-firefox

标签

javascript

css

loader