#css #html #webdev #frontend Placeholder dla img - nie jest widoczny od początku i przez to mruga.
Placeholder w formie background-image dla img: * mruga, gdy background-image ładuje się z linka, np. url("placeholder.png") * nie mruga, gdy background-image ładuje się z data url, np. url("data:image/png;base64,...") Czy da się uzyskać efekt NIE mrugania, używając zwykłego url jak url("placeholder.png")?
@look997: w jakim sensie mruga? Pamiętaj, że prawie nigdy nie załadujesz zewnętrznego pliku przed rozpoczęciem rysowania strony, więc jeśli obrazek jest kluczowy na starcie - tak jak kolega wyżej pisał, musi być wpisany w dokument.
@ProgramistaHTML: @LepiejWcaleNizPozno: Znaczy, to ładuje się z dysku i jest ten link preload, więc nie wiem czy to kwestia samego ładowania. Może ten link preload nie czeka do końca?
Widzę to tak, że byłby jakiś prerender(nie mylić z preload) przed rozpoczęciem wyświetlania elementów strony.
W sensie - coś jak z base url - zakładam że po sparsowaniu tego ciągu znaków, go jakoś szykuje i dopiero wtedy zaczyna wyświetlać stronę.
@look997: a możesz dokładniej opisać to mruganie? I czy rzeczywiście dokładnie ten sam obrazek w dokładnie identycznej stronie działa dobrze w base, a nie działa jako link? No i oczywiście - na jakiej przeglądarce?
/* background-image: url("/thumb-placeholder-x.png"); */ background-image: var(--placeholder-image-dataurl); Pod zmienną CSS --placeholder-image-dataurl, jest wygenerowany data url z pliku /thumb-placeholder-x.png.
Firefox.
W sumie, jak robię hard reload w Firefoksie, to też na data url mruga, ale normalny relaod nie. I też jak otworzyć stronę w
@look997: Poczytałem dokładniej o preloadzie, i jeśli dobrze rozumiem - ta funkcja załaduje medium nim będzie potrzebne, rozpoczynając jego ładowanie jeszcze przed pierwszym rysowaniem. Problem jest taki, że nawet pobierając obrazek z lokalnego dysku, po rozpoczęciu ładowania dalej następuje natychmiastowo pierwszy render, więc niestety - przekleństwo asynchroniczności.
Żeby nie mrugało w ten sposób, musisz albo zakodować obraz w dokumencie html, albo po prostu się pogodzić z tym, że tak to działa
@ProgramistaHTML: No czerwone tło jest po to, żebym lepiej widział co się dzieje. :P No to jest bardziej dążenie do doskonałości. Da się bez tego przeżyć.
@ProgramistaHTML: Pytanie: W Chrome obrazek docelowy wyświetla się stopniowo od góry do dołu, po "linijce" piksel. W Firefox wyświetla się na raz - i tak powinno być wszędzie.
Jak to ustawić dla każdej przeglądarki?
Jak ładuje się stopniowo, to docelowy obrazek zasłania część placeholdera a potem dopiero całość. Efekt wygląda źle.
I jeszcze: w Firefoksie pozbyłem się tekstu który wyświetla jak obrazek docelowy nie jest jeszcze załadowany (ten co jest w
@look997: Przepraszam, że tak zapytam, ale ty robisz silnik graficzny, czy stronę internetową? Takie rzeczy to domena przeglądarki, większość ludzi, wchodząc na stronę, jest przyzwyczajona do tego, że coś się musi doładować. Jeśli chcesz mieć bezpośredni wpływ na rysowanie każdej klatki, to musisz użyć canvasa, ale do normalnego wyświetlania zdjęcia na stronie, to nie tędy droga. Tracisz kupę czasu na zajmowanie się sposobem, w jaki użytkownik ogląda to przez max parę
@ProgramistaHTML: "Przepraszam, że tak zapytam, ale ty robisz silnik graficzny, czy stronę internetową? Takie" Chcę zrobić bardziej "app experience". To będzie w zasadzie przeglądarka obrazków ze specjalnymi funkcjami "szytymi na miarę" pod pewne potrzeby (nie że przetwarzanie obrazków, tylko dotyczące danych z tych obrazków).
"musiałbyś je najpierw załadować (preload), dać jakiś placeholder, a po pełnym pobraniu obrazka dopiero go wyświetlić." Właśnie tak robiłem i coś musiałem poprawić/sprawdzić, żeby było jeszcze lepiej.
Placeholder dla img - nie jest widoczny od początku i przez to mruga.
Placeholder w formie
background-imagedla img:* mruga, gdy background-image ładuje się z linka, np.
url("placeholder.png")* nie mruga, gdy background-image ładuje się z data url, np.
url("data:image/png;base64,...")Czy da się uzyskać efekt NIE mrugania, używając zwykłego url jak
url("placeholder.png")?To nie pomaga: ``
Widzę to tak, że byłby jakiś prerender(nie mylić z preload) przed rozpoczęciem wyświetlania elementów strony.
W sensie - coś jak z base url - zakładam że po sparsowaniu tego ciągu znaków, go jakoś szykuje i dopiero wtedy zaczyna wyświetlać stronę.
Coś
content: url(mirek.svg);
width: 0;
height: 0;
visibility: hidden;
}
@ProgramistaHTML: Tak, to jest taka tylko zamiana:
/* background-image: url("/thumb-placeholder-x.png"); */background-image: var(--placeholder-image-dataurl);
Pod zmienną CSS
--placeholder-image-dataurl, jest wygenerowany data url z pliku/thumb-placeholder-x.png.Firefox.
W sumie, jak robię hard reload w Firefoksie, to też na data url mruga, ale normalny relaod nie.
I też jak otworzyć stronę w
Zwykły url:
Komentarz usunięty przez autora
Żeby nie mrugało w ten sposób, musisz albo zakodować obraz w dokumencie html, albo po prostu się pogodzić z tym, że tak to działa
No to jest bardziej dążenie do doskonałości. Da się bez tego przeżyć.
W Chrome obrazek docelowy wyświetla się stopniowo od góry do dołu, po "linijce" piksel.
W Firefox wyświetla się na raz - i tak powinno być wszędzie.
Jak to ustawić dla każdej przeglądarki?
Jak ładuje się stopniowo, to docelowy obrazek zasłania część placeholdera a potem dopiero całość. Efekt wygląda źle.
I jeszcze: w Firefoksie pozbyłem się tekstu który wyświetla jak obrazek docelowy nie jest jeszcze załadowany (ten co jest w
Chcę zrobić bardziej "app experience".
To będzie w zasadzie przeglądarka obrazków ze specjalnymi funkcjami "szytymi na miarę" pod pewne potrzeby (nie że przetwarzanie obrazków, tylko dotyczące danych z tych obrazków).
"musiałbyś je najpierw załadować (preload), dać jakiś placeholder, a po pełnym pobraniu obrazka dopiero go wyświetlić."
Właśnie tak robiłem i coś musiałem poprawić/sprawdzić, żeby było jeszcze lepiej.