65 votos

Imagen en blanco codificado como uri de datos

He construido un slider de imagenes (basado en el excelente bxSlider) que se carga previa de imágenes justo a tiempo antes de que la diapositiva en la vista. Funciona bastante bien ya, pero no creo que mi solución es válida HTML.

Mi técnica es la siguiente: puedo generar el control deslizante de marcado con la primera diapositiva de la imagen que se inserta como de costumbre (con un <img src="foo.jpg">) y las imágenes posteriores se hace referencia en un atributo de datos como <img data-orig="bar.jpg">. Una de Javascript, a continuación, hace malabares con el data-orig -> src de cambio cuando sea necesario, la activación de la precarga.

En otras palabras, tengo:

<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>

Para evitar el vacío src="" atributos (que son perjudiciales para el rendimiento en algunos navegadores), he insertado src="data:" efectivamente insertar una imagen en blanco como un marcador de posición.

La cosa es que, me parece que no puede encontrar nada en la documentación de datos-URI decir si esto es válido de datos-URI o no. Yo, básicamente, quiere que el mínimo de datos-URI que se resuelve en un espacio en blanco/transparente de la imagen, por lo que el navegador puede resolver el src de inmediato y seguir adelante (con ningún error o solicitud de red). Quizás src="data:image/gif;base64," sería mejor?

151voto

Jens Roland Puntos 19171

Miré en él y la más pequeña imagen GIF transparente, codificado como una uri de datos, fue esto:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

que es lo que estoy usando ahora.

26voto

Fabrizio Calderan Puntos 43398

Si usted necesita un pixel de la imagen transparente de 1 x 1 a crear este uri de datos como src atributo predeterminado

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

Esto es en cambio un base64 codificación de una imagen de 1 x 1 blanco

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

de lo contrario podría definir data:null y ~ 60 bytes adicionales para cada imagen

10voto

Alex Puntos 5018
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

es más pequeño :D

6voto

Matt Votsikas Puntos 176

1px por 1px imagen JPEG

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

4voto

Maël Nison Puntos 1815

"Blanco gif" de Fabrizio no es en realidad perfectamente blanco: es rgb(254, 255, 255) .

Yo uso el siguiente uno (que pasa a ser más pequeños), encontró en esta página.

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: