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
Answer. Answer: We add the image to make it look nice and attractive and border to make the image highlighted on the web page.
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.
With the CSS border-image property, you can set an image to be used as the border around an element.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With