Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Border in Firefox while image is loading

like image 551
Dxr Tw Avatar asked Nov 23 '12 02:11

Dxr Tw


People also ask

Why do you add an image and a border in the web page?

Answer. Answer: We add the image to make it look nice and attractive and border to make the image highlighted on the web page.

Which CSS property is used to give border around an image?

The border-image property allows you to specify an image to be used as the border around an element. The border-image property is a shorthand property for: border-image-source. border-image-slice.

Which CSS property can be used to set the image as border instead of the border style?

With the CSS border-image property, you can set an image to be used as the border around an element.

How do I change the border style of an image in HTML?

Add a border using HTMLWithin the img tag, add the border: #000000 6px outset; to the style attribute. Where you can enter your own color code, border width, and border style in the code.


1 Answers

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.

like image 61
LoveAndCoding Avatar answered Sep 23 '22 05:09

LoveAndCoding