holder
1.0.0
El titular hace que los marcadores de posición de imagen en el navegador utilizan SVG.
Utilizado por miles de proyectos de código abierto (incluido Bootstrap V3) y muchos otros sitios.
No hay solicitudes adicionales, pequeño tamaño del paquete, altamente personalizable.
npm install holderjsyarn add holderjsbower install holderjsgem 'rails-assets-holderjs'meteor add imsky:holderphp composer.phar update imsky/holderInstall-Package Holder.js Incluya holder.js en su HTML:
< script src =" holder.js " > </ script > El titular luego procesará todas las imágenes con un atributo src específico, como este:
< img src =" holder.js/300x200 " >La etiqueta anterior se convertirá en marcador de posición 300 píxeles de ancho y 200 píxeles de altura.
Para evitar errores de consola 404, puede usar data-src en lugar de src .
Para insertar programáticamente un marcador de posición, use la API run() :
var myImage = document . getElementById ( 'myImage' ) ;
Holder . run ( {
images : myImage
} ) ; Las opciones de marcador de posición se establecen a través de propiedades de URL, por ejemplo, holder.js/300x200?x=y&a=b . Las múltiples opciones están separadas por el & carácter.
theme : El tema a usar para el marcador de posición. Ejemplo: holder.js/300x200?theme=skyrandom : use un tema aleatorio. Ejemplo: holder.js/300x200?random=yesbg : color de fondo. Ejemplo: holder.js/300x200?bg=2a2025fg : color de primer plano (texto). Ejemplo: holder.js/300x200?fg=fffffftext : texto personalizado. Ejemplo: holder.js/300x200?text=Hellosize : tamaño de texto personalizado. El valor predeterminado a las unidades pt . Ejemplo: holder.js/300x200?size=50font : fuente de texto personalizada. Ejemplo: holder.js/300x200?font=Helveticaalign : Alineación de texto personalizado (izquierda, derecha). Ejemplo: holder.js/300x200?align=leftoutline : dibuje el esquema y las diagonales para el marcador de posición. Ejemplo: holder.js/300x200?outline=yeslineWrap : relación longitud máxima de longitud a ancho de imagen. Ejemplo: holder.js/300x200?lineWrap=0.5El titular incluye soporte para temas, para ayudar a los titulares de colocadores a combinar con su diseño.
Hay 6 temas predeterminados: sky , vine , lava , gray , industrial y social .
Los temas tienen 5 propiedades: fg , bg , size , font y fontweight . La propiedad size especifica el tamaño mínimo de fuente para el tema. El valor predeterminado fontweight es bold . Puede crear un tema de muestra como este:
Holder . addTheme ( "dark" , {
bg : "#000" ,
fg : "#aaa" ,
size : 11 ,
font : "Monaco" ,
fontweight : "normal"
} ) ; Si tiene un grupo de marcadores de posición donde desea usar un texto particular, puede hacerlo agregando una propiedad text al tema:
Holder . addTheme ( "thumbnail" , { bg : "#fff" , text : "Thumbnail" } ) ; Hay dos formas de usar temas personalizados con el soporte:
El primer enfoque es el más fácil. Después de incluir holder.js , agregue una etiqueta script que agrega el tema que desea:
< script src =" holder.js " > </ script >
< script >
Holder . addTheme ( "bright" , {
bg : "white" , fg : "gray" , size : 12
} ) ;
</ script > El segundo enfoque requiere que llame a run después de agregar el tema, así:
Holder . addTheme ( "bright" , { bg : "white" , fg : "gray" , size : 12 } ) . run ( ) ; Puede usar soporte en diferentes áreas en diferentes imágenes con temas personalizados:
< img data-src =" example.com/100x100?theme=simple " id =" new " > Holder . run ( {
domain : "example.com" ,
themes : {
"simple" : {
bg : "#fff" ,
fg : "#000" ,
size : 12
}
} ,
images : "#new"
} ) ; Puede agregar un marcador de posición programáticamente encadenando las llamadas del titular:
Holder . addTheme ( "new" , {
fg : "#ccc" ,
bg : "#000" ,
size : 10
} ) . addImage ( "holder.js/200x100?theme=new" , "body" ) . run ( ) ; El primer argumento en addImage es el atributo src , y el segundo es un selector CSS del elemento principal.
El soporte agrega automáticamente los descansos de línea al texto que sale de los límites de la imagen. Si el texto es tan largo que sale de los límites horizontales y verticales, el texto se mueve hacia la parte superior. Si prefiere controlar los descansos de línea, puede agregar n a la propiedad text :
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere. " > Si desea deshabilitar el envoltorio de línea, configure la opción nowrap en true :
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere.&nowrap=true " > Al usar la opción text , no se muestran las dimios de imagen. Para volver a insertar la dimensión en el texto, use simple el marcador de posición Special holder_dimensions .
< img data-src =" holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions " > Los marcadores de posición que usan una fuente personalizada se representan utilizando lienzo por defecto, debido a las limitaciones de SVG en la vinculación de recursos de dominio cruzado. Si está utilizando solo fuentes disponibles localmente, puede deshabilitar este comportamiento estableciendo noFontFallback en true en Holder.run Opciones. Sin embargo, si necesita representar un marcador de posición SVG utilizando una fuente cargada externamente, debe usar la etiqueta object en lugar de la etiqueta img y agregar una clase holderjs a las etiquetas link apropiadas. Aquí hay un ejemplo:
< head >
< link href =" http://.../font-awesome.css " rel =" stylesheet " class =" holderjs " >
</ head >
< body >
< object data-src =" holder.js/300x200?font=FontAwesome " > </ object > IMPORTANTE: Cuando se prueban localmente, las URL de fuentes deben tener un protocolo http o https definido.
IMPORTANTE: Las fuentes atendidas desde ubicaciones distintas de los registros públicos (es decir, Google Fonts, Typekit, etc.) requieren que se establezcan los encabezados CORS correctos. Vea cómo usar CDN con WebFonts para más detalles.
Los marcadores de posición <object> funcionan como <img> marcadores de posición, con el beneficio adicional de que su DOM pueda ser inspeccionado y modificado. Al igual que con los marcadores de posición <img> , el atributo data-src es más confiable que el atributo data .
IMPORTANTE: Los porcentajes se especifican con el carácter p , no con el carácter % .
La especificación de una dimensión en porcentajes crea un marcador de posición fluido que responde a las consultas de los medios.
< img data-src =" holder.js/100px75?theme=social " > Por defecto, el marcador de posición Fluid mostrará su tamaño actual en píxeles. Para mostrar las dimensiones originales, es decir, 100%x75, configure el indicador textmode en literal como: holder.js/100px75?textmode=literal .
Si desea evitar que el soporte aplique un tamaño de imagen, use el indicador auto como así:
< img data-src =" holder.js/200x200?auto=yes " >Lo anterior hará un marcador de posición sin ningún CSS incrustado para la altura o el ancho.
Para mostrar el tamaño actual de un marcador de posición de tamaño automáticamente, configure el indicador textmode en exact como: holder.js/200x200?auto=yes&textmode=exact .
Tanto los marcadores de posición fluidos como los marcadores de posición de tamaño automático en modo exacto se actualizan cuando la ventana se redimensiona. Para establecer si se actualiza o no una imagen en particular en el cambio de tamaño de la ventana, puede usar el método setResizeUpdate de así decirlo:
var img = $ ( '#placeholder' ) . get ( 0 ) ;
Holder . setResizeUpdate ( img , false ) ;Lo anterior detendrá cualquier actualización de renderizado en la imagen especificada (que debe ser un objeto DOM).
Para habilitar las actualizaciones nuevamente, ejecute lo siguiente:
Holder . setResizeUpdate ( img , true ) ;Esto habilitará actualizaciones e inmediatamente representará al marcador de posición.
El titular puede representar a los marcadores de posición como imágenes de fondo para elementos con la clase holderjs , como esta:
# sample { background : url(?holder.js / 200 x200?theme=social) no-repeat} < div id =" sample " class =" holderjs " > </ div > ¿La URL del titular en CSS debería tener un ? Al frente. Al igual que en los marcadores de posición de imagen, puede especificar la URL del titular en un atributo data-background-src :
< div class =" holderjs " data-background-src =" ?holder.js/300x200 " > </ div >IMPORTANTE: Asegúrese de definir una altura y/o ancho para elementos con marcadores de posición de fondo. Los marcadores de posición fluidos aún no son respaldados.
El soporte proporciona varias opciones en tiempo de ejecución que afectan el proceso de generación de imágenes. Estos se pasan a través de las llamadas Holder.run .
domain : el dominio a usar para la generación de imágenes. Valor predeterminado: holder.js .dataAttr : el atributo HTML utilizado para definir un retroceso al atributo src nativo. Valor predeterminado: data-src .renderer : el renderizador para usar. Opciones disponibles: svg , canvas . Valor predeterminado: svg .images : el selector CSS utilizado para encontrar etiquetas img . Valor predeterminado: img .objects : el selector CSS utilizado para encontrar marcadores de posición object . Valor predeterminado: object .bgnodes : El selector CSS utilizado para encontrar elementos que tengan en segundo plano los titulares. Valor predeterminado: body .holderjs .stylenodes : el selector CSS utilizado para encontrar hojas de estilo para importar a marcadores de posición SVG. Valor predeterminado: head link.holderjs .noFontFallback : no vuelva a revertir el lienzo si usa fuentes personalizadas.noBackgroundSize : no establezca background-size para los marcadores de posición de fondo. Puede evitar que Holder ejecute su configuración predeterminada ejecutando Holder.run con su configuración personalizada justo después de incluir holder.js . Sin embargo, tendrá que ejecutar Holder.run nuevamente para representar a cualquier marcador de posición que use la configuración predeterminada.
El soporte es compatible con lazyload.js y funciona con imágenes fluidas y de ancho fijo. Para obtener los mejores resultados, ejecute .lazyload({skip_invisible:false}) .
Cuando se use titular en un componente React, ejecute Holder.run en componentDidMount para habilitar la representación después de los cambios de estado. Vea este tema para más detalles.
Puede usar titular en proyectos VUE 2+ con Vue-Holderjs.
Puede usar el soporte en proyectos angulares con ng-tolder o con angular-2-holderjs para proyectos Angular 2.
Debido a que Meteor incluye scripts en la parte superior del documento de forma predeterminada, el DOM puede no estar completamente disponible cuando se llama al Holder. Por esta razón, coloque el código relacionado con el titular en un oyente de eventos "Dom Ready".
Si está utilizando ProvidePlugin en su configuración de Webpack, asegúrese de configurarlo de la siguiente manera:
plugins: [
new webpack . ProvidePlugin ( {
'Holder' : 'holderjs' ,
'holder' : 'holderjs' ,
'window.Holder' : 'holderjs'
} )
] El titular se proporciona bajo la licencia MIT.
Holder es un proyecto de Ivan Malopinsky.
