Display borders and headers when loading images in Firefox

Question

I have a problem with firefox. I have many images on my site. When I browse the pages in Firefox, the border header and images are displayed during image loading. After the download is complete, this border / title disappears and is replaced by the image.

This only happens in firefox. Chrome and other browsers download images without any borders and headers that look cleaner. In words, these boundaries created by firefox are ugly.

Is it possible to remove this, replace it with a bootloader, or something like that? I tried adding a css loader with background-image: url () ... thought these borders would not be visible, however they are still there.

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

thanks

Answer 1

You can use : - moz-load psuedo-class so that it does not display. Something like this should work:

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

An alternative to this is something like loading an AJAX script that will load an image in the background and display a download dialog or animation. There are many methods for this, and a search here or on Google should produce many many results on how to do this effectively.

Answer 2

You do not need to explicitly wait for the load using CSS. You can do this in javascript too.

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