Zbudowałem suwak obrazu (oparty na wspaniałym bxSlider), który wstępnie ładuje obrazy dokładnie w czasie, zanim zostaną one wyświetlone. Już działa całkiem dobrze, ale nie sądzę, że moje rozwiązanie jest poprawne HTML.Puste zdjęcie zakodowane jako dane-uri

Moja technika wygląda następująco: Generuję znacznik suwaka, wstawiając jak zwykle pierwszy obraz slajdu (z <img src="foo.jpg">), a kolejne obrazy są przywoływane w atrybucie danych, takim jak <img data-orig="bar.jpg">. JavaScript w razie potrzeby żongluje zmianą data-orig -> src, co powoduje wstępne ładowanie.

Innymi słowy, mam:

<div class="slider"> 
    <div><img src="time.jpg" /></div> 
    <div><img src="data:" data-orig="fastelavn.jpg" /></div> 
    <div><img src="data:" data-orig="pels_strik.jpg" /></div> 
    <div><img src="data:" data-orig="fashion.jpg" /></div> 
</div>

Aby uniknąć pustych src="" atrybuty (które są harmful to performance w some browsers), mam wstawiony src="data:" skutecznie wstawić pusty obraz jako zastępczy.

Chodzi o to, że nie mogę znaleźć niczego w numerze documentation for data-URI, informując, czy jest to poprawny identyfikator URI danych, czy też nie. Zasadniczo potrzebuję minimalnego identyfikatora URI danych, który rozdziela się na pusty/przezroczysty obraz, aby przeglądarka mogła natychmiast rozpoznać src i przejść dalej (bez błędu lub żądania sieci). Może src="data:image/gif;base64," byłoby lepiej?

Źródło

2012-02-03 Jens Roland

Wystarczy użyć pustego hasha. http://stackoverflow.com/a/28077004/3841049 – iGidas

@iGidas: zły pomysł, ponieważ wiele przeglądarek faktycznie wykona drugą prośbę na stronie głównej (powodując znacznie gorszy wynik niż oryginalny obraz i tworząc mylące wpisy w twoim logi serwera), spróbuj zinterpretować kod HTML jako obraz, wygenerować błąd i potencjalnie spowodować prawdziwe błędy aplikacji (np. w koszykach/stronach kasy, gdzie "odświeżanie strony" powoduje dodanie do koszyka dodatkowych elementów lub uruchamia środki bezpieczeństwa) –

Co z aktualnym 'data: image/gif; base64,' używanym jako 'src'? Lub nawet krótsze "dane:", kończące się śpiączką. Wydaje się być poprawnym HTML i działa we wszystkich nowoczesnych przeglądarkach bez żadnych błędów. Jakieś argumenty przeciwko używaniu go? – bobo

140

Zajrzałem do niego i smallest possible transparent GIF image, zakodowane jako dane -uri, było to:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

czyli co używam teraz.

Źródło

2012-04-01 18:47:07

Jeśli twój element 'img' jest już ukryty i próbujesz uniknąć błędów HTTP 404, zobacz http://stackoverflow.com/a/14115340/14731 dla krótszych danych nieprzejrzystego obrazu. – Gili

jeśli trzeba przezroczysty piksel obrazu 1x1 wystarczy ustawić ten URI danych jako src domyślną atrybutu

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

to zamiast tego kodowania base64 dla 1x1 biel

data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

inaczej można ustawić data:null i zaoszczędzić ~ 60 dodatkowych bajtów dla każdego obrazu

Źródło

2012-02-03 11:30:51 fcalderan

Czy możesz podać link do weryfikacji danych: null jest prawidłowy jako źródło obrazu? –

data: wartość null jest niepoprawna. – Jack

zawsze pracował dla mnie. – fcalderan

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

jest mniejszy: D

Źródło

2013-11-10 16:05:16 Alex

Prawda - ta jest urocza! Ale czy jest to standardowy zgodny gif? Czy mógłbyś wyjaśnić, jak do niego doszło? –

http://proger.i-forge.net/The_smallest_transparent_pixel/eBQ – Alex

ff 27.0 czarny punkt –

"białe gif" Fabrizio nie jest idealnie biały rzeczywiście: jest rgb(254, 255, 255).

Używam poniższego (który jest mniejszy), znalezionego na this page.

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=

Źródło

2014-02-28 15:18:05

To jest w porządku, jeśli chcesz biały piksel, ale szukałem bardziej uniwersalnego przezroczystego. –

1px 1px przez JPEG

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==

Źródło

2014-04-14 23:07:17

Najmniejszy jaki kiedykolwiek widziałem

dane: image/gif; base64, R0lGODlhAQABAAAAACw =

Źródło

2014-07-03 09:05:34 azerafati

Oczywiście, z wyjątkiem tego, że jest to tylko Chrome. Otwórz go w Firefoksie, a otrzymasz komunikat "Nie można wyświetlić obrazu, ponieważ zawiera on błędy". Zobacz http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/ [20121112]% 20% 20% najniżej% 20przejrzysty% 20pixel.html –

@JensRoland, tak, mam rację, potwierdzam, że nie działa w Firefoksie! chociaż przy użyciu tego ponad rok temu nie pamiętam żadnego problemu z FF! dziwne – azerafati

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

Ważne i bardzo ściśliwe. Zasadniczo za darmo, jeśli na stronie znajduje się inny wbudowany svg.

Źródło

2015-07-12 11:12:15 Adria

Podoba mi się ten. Widzę tylko dwie słabości: Po pierwsze, SVG nie jest obsługiwane w IE <9 (zwykle nie jest to problem, ale czyni to nieosiągalnym dla niektórych witryn); i po drugie, "dane SVG muszą być zakodowane do pracy w IE i Firefox" (patrz http://caniuse.com/#search=datauri), więc faktycznie musisz użyć: 'data: image/svg + xml,% 3Csvg% 20xmlns =% 22http: // www.w3.org/2000/svg% 22 /% 3E' który jest nadal 4 bajty krótszy niż mój, ale wygląda trochę niechlujnie –

Puste zdjęcie zakodowane jako dane-uri

Odpowiedz

Najmniejszy jaki kiedykolwiek widziałem

Powiązane problemy