Obramowanie i tytuł wyświetlane podczas ładowania obrazu w przeglądarce Firefox

Question

Mam problem z Firefoxem. Na mojej stronie mam wiele zdjęć. Podczas przeglądania stron w przeglądarce Firefox tytuł i obramowanie są widoczne podczas wczytywania obrazu. Po zakończeniu pobierania ta ramka/tytuł znika i zostaje zastąpiony obrazem.

Dzieje się tak tylko w firefox. Chrome i inne przeglądarki ładują obrazy bez granic i tytułów, które wyglądają na dużo "czystsze". Słowami, granice stworzone przez firefox są brzydkie.

Czy mogę to usunąć, wymienić ładowaczem lub czymś w tym rodzaju? Próbowałem dodać css loader z background-image: url() ... myśląc, że te granice nie będą widoczne, jednak nadal tam są.

W jaki sposób witryny takie jak pinterest, dribbble i inne dostarczają obrazy bez tworzenia obramowania w Firefoksie?

Dziękuję

Answer 1

Można użyć :-moz-loading psuedo-class aby ustawić go nie pojawiają. Coś jak to powinno działać:

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

Alternatywą jest to coś w rodzaju scenariusza załadunku AJAX, która będzie załadować obraz w tle i wyświetla okno dialogowe załadunkiem lub animację. Istnieje wiele technik, aby to zrobić, a wyszukiwanie tutaj lub w Google powinno przynieść wiele bardzo wielu wyników, jak to zrobić skutecznie.

Answer 2

Nie trzeba jawnie czekać na obciążenie za pomocą CSS. Możesz to zrobić również w javascript.

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