holder
1.0.0
Le support rend les espaces réservés d'image dans le navigateur à l'aide de SVG.
Utilisé par des milliers de projets open source (y compris Bootstrap v3) et de nombreux autres sites.
Pas de demandes supplémentaires, petite taille de faisceau, hautement personnalisable.
npm install holderjsyarn add holderjsbower install holderjsgem 'rails-assets-holderjs'meteor add imsky:holderphp composer.phar update imsky/holderInstall-Package Holder.js Incluez holder.js dans votre HTML:
< script src =" holder.js " > </ script > Holder traitera ensuite toutes les images avec un attribut src spécifique, comme celui-ci:
< img src =" holder.js/300x200 " >La balise ci-dessus rendra comme un espace réservé à 300 pixels de large et 200 pixels de haut.
Pour éviter les erreurs de la console 404, vous pouvez utiliser data-src au lieu de src .
Pour insérer par programme un espace réservé utilisez l'API run() :
var myImage = document . getElementById ( 'myImage' ) ;
Holder . run ( {
images : myImage
} ) ; Les options d'espace réservées sont définies via les propriétés d'URL, par exemple holder.js/300x200?x=y&a=b . Plusieurs options sont séparées par le & caractère.
theme : Le thème à utiliser pour l'espace réservé. Exemple: holder.js/300x200?theme=skyrandom : Utilisez un thème aléatoire. Exemple: holder.js/300x200?random=yesbg : Couleur d'arrière-plan. Exemple: holder.js/300x200?bg=2a2025fg : Couleur de premier plan (texte). Exemple: holder.js/300x200?fg=fffffftext : texte personnalisé. Exemple: holder.js/300x200?text=Hellosize : taille du texte personnalisée. Par défaut est des unités pt . Exemple: holder.js/300x200?size=50font : police de texte personnalisée. Exemple: holder.js/300x200?font=Helveticaalign : alignement du texte personnalisé (gauche, droite). Exemple: holder.js/300x200?align=leftoutline : dessinez un contour et des diagonales pour l'espace réservé. Exemple: holder.js/300x200?outline=yeslineWrap : rapport de longueur de ligne / largeur d'image maximale. Exemple: holder.js/300x200?lineWrap=0.5Le titulaire comprend un soutien aux thèmes, pour aider les espaces réservés à se fondre dans votre disposition.
Il y a 6 thèmes par défaut: sky , vine , lava , gray , industrial et social .
Les thèmes ont 5 propriétés: fg , bg , size , font et fontweight . La propriété size spécifie la taille minimale de la police pour le thème. La valeur par défaut fontweight est bold . Vous pouvez créer un exemple de thème comme celui-ci:
Holder . addTheme ( "dark" , {
bg : "#000" ,
fg : "#aaa" ,
size : 11 ,
font : "Monaco" ,
fontweight : "normal"
} ) ; Si vous avez un groupe d'espaces réservés où vous souhaitez utiliser un texte particulier, vous pouvez le faire en ajoutant une propriété text au thème:
Holder . addTheme ( "thumbnail" , { bg : "#fff" , text : "Thumbnail" } ) ; Il existe deux façons d'utiliser des thèmes personnalisés avec le titulaire:
La première approche est la plus simple. Après avoir inclus holder.js , ajoutez une balise script qui ajoute le thème que vous souhaitez:
< script src =" holder.js " > </ script >
< script >
Holder . addTheme ( "bright" , {
bg : "white" , fg : "gray" , size : 12
} ) ;
</ script > La deuxième approche nécessite que vous appeliez run après avoir ajouté le thème, comme ceci:
Holder . addTheme ( "bright" , { bg : "white" , fg : "gray" , size : 12 } ) . run ( ) ; Vous pouvez utiliser le support dans différentes zones sur différentes images avec des thèmes personnalisés:
< 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"
} ) ; Vous pouvez ajouter un espace réservé par programme par des appels de support:
Holder . addTheme ( "new" , {
fg : "#ccc" ,
bg : "#000" ,
size : 10
} ) . addImage ( "holder.js/200x100?theme=new" , "body" ) . run ( ) ; Le premier argument dans addImage est l'attribut src , et le second est un sélecteur CSS de l'élément parent.
Holder ajoute automatiquement des pauses de ligne au texte qui sort des limites de l'image. Si le texte est si long qu'il sort des limites horizontales et verticales, le texte est déplacé vers le haut. Si vous préférez contrôler les pauses de ligne, vous pouvez ajouter n à la propriété text :
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere. " > Si vous souhaitez désactiver l'emballage des lignes, définissez l'option nowrap sur true :
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere.&nowrap=true " > Lorsque vous utilisez l'option text , les dimessions d'image ne sont pas affichées. Pour réinsérer la dimension dans le texte, utilisez simple l'espace réservé Special holder_dimensions .
< img data-src =" holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions " > Les espaces réservés utilisant une police personnalisée sont rendus à l'aide de Canvas par défaut, en raison des contraintes de SVG sur la liaison des ressources inter-domaines. Si vous n'utilisez que des polices disponibles localement, vous pouvez désactiver ce comportement en définissant noFontFallback sur true dans Holder.run Options. Cependant, si vous avez besoin de rendre un espace réservé SVG à l'aide d'une police chargée à l'extérieur, vous devez utiliser la balise object au lieu de la balise img et ajouter une classe holderjs aux balises link appropriées. Voici un exemple:
< head >
< link href =" http://.../font-awesome.css " rel =" stylesheet " class =" holderjs " >
</ head >
< body >
< object data-src =" holder.js/300x200?font=FontAwesome " > </ object > Important: lors des tests localement, les URL de police doivent avoir un protocole http ou https défini.
IMPORTANT: Les polices servies dans des emplacements autres que les registres publics (c'est-à-dire les polices Google, Typekit, etc.) exigent que les en-têtes CORS corrects soient définis. Découvrez comment utiliser CDN avec WebFonts pour plus de détails.
<object> Les espaces réservés fonctionnent comme <img> les espaces réservés, avec le bénéfice supplémentaire que leur DOM pouvant être inspecté et modifié. Comme avec <img> les espaces réservés, l'attribut data-src est plus fiable que l'attribut data .
IMPORTANT: Les pourcentages sont spécifiés avec le caractère p , pas avec le caractère % .
La spécification d'une dimension en pourcentages crée un espace réservé fluide qui répond aux requêtes multimédias.
< img data-src =" holder.js/100px75?theme=social " > Par défaut, l'espace réservé fluide affichera sa taille actuelle en pixels. Pour afficher les dimensions d'origine, c'est-à-dire 100% x75, définissez l'indicateur textmode sur literal comme SO: holder.js/100px75?textmode=literal .
Si vous souhaitez éviter le support appliquant une taille d'image, utilisez l'indicateur auto comme tel:
< img data-src =" holder.js/200x200?auto=yes " >Ce qui précède rendra un espace réservé sans aucun CSS intégré pour la hauteur ou la largeur.
Pour afficher la taille actuelle d'un espace réservé de taille automatique, définissez l'indicateur textmode sur exact comme: holder.js/200x200?auto=yes&textmode=exact .
Les espaces réservés fluides et les espaces réservés de taille automatique en mode exact sont mis à jour lorsque la fenêtre est redimensionnée. Pour définir si une image particulière est mise à jour sur le redimensionnement de la fenêtre, vous pouvez utiliser la méthode setResizeUpdate comme:
var img = $ ( '#placeholder' ) . get ( 0 ) ;
Holder . setResizeUpdate ( img , false ) ;Ce qui précède en pause toute mise à jour de rendu sur l'image spécifiée (qui doit être un objet DOM).
Pour activer à nouveau les mises à jour, exécutez ce qui suit:
Holder . setResizeUpdate ( img , true ) ;Cela permettra des mises à jour et rendra immédiatement l'espace réservé.
Le titulaire peut rendre les espaces réservés comme images d'arrière-plan pour les éléments avec la classe holderjs , comme ceci:
# sample { background : url(?holder.js / 200 x200?theme=social) no-repeat} < div id =" sample " class =" holderjs " > </ div > L'URL du titulaire en CSS devrait avoir un ? devant. Comme dans les espaces réservés d'image, vous pouvez spécifier l'URL du support dans un attribut de data-background-src :
< div class =" holderjs " data-background-src =" ?holder.js/300x200 " > </ div >IMPORTANT: Assurez-vous de définir une hauteur et / ou une largeur pour les éléments avec des espaces réservés de fond. Les espaces réservés des antécédents fluides ne sont pas encore soutenus.
Holder offre plusieurs options lors de l'exécution qui affectent le processus de génération d'images. Ceux-ci sont transmis par les appels Holder.run .
domain : le domaine à utiliser pour la génération d'images. Valeur par défaut: holder.js .dataAttr : l'attribut HTML utilisé pour définir une selt-retour à l'attribut src natif. Valeur par défaut: data-src .renderer : le rendu à utiliser. Options disponibles: svg , canvas . Valeur par défaut: svg .images : Le sélecteur CSS utilisé pour trouver des balises img . Valeur par défaut: img .objects : le sélecteur CSS utilisé pour trouver des espaces réservés object . Valeur par défaut: object .bgnodes : Le sélecteur CSS utilisé pour trouver des éléments qui ont des paléles de fond. Valeur par défaut: body .holderjs .stylenodes : Le sélecteur CSS utilisé pour trouver des feuilles de styles pour importer dans les espaces réservés SVG. Valeur par défaut: head link.holderjs .noFontFallback : ne retombez pas sur le canevas si vous utilisez des polices personnalisées.noBackgroundSize : ne définissez pas background-size pour les espaces réservés d'arrière-plan. Vous pouvez empêcher le titulaire d'exécuter sa configuration par défaut en exécutant Holder.run avec vos paramètres personnalisés juste après avoir inclus holder.js . Cependant, vous devrez exécuter Holder.run à nouveau pour rendre tous les espaces réservés qui utilisent la configuration par défaut.
Le titulaire est compatible avec lazyload.js et fonctionne avec des images fluide et fixe. Pour de meilleurs résultats, exécutez .lazyload({skip_invisible:false}) .
Lorsque vous utilisez Holder dans un composant React, exécutez Holder.run dans componentDidMount Activer le rendu après les modifications d'état. Voir ce problème pour plus de détails.
Vous pouvez utiliser Holder dans les projets Vue 2+ avec Vue-Holderjs.
Vous pouvez utiliser le support dans des projets angulaires avec NG-Holder ou avec Angular-2-Holderjs pour les projets Angular 2.
Étant donné que Meteor inclut les scripts en haut du document par défaut, le DOM peut ne pas être entièrement disponible lorsque le titulaire est appelé. Pour cette raison, placez le code lié à Holder dans un écouteur d'événements "Dom Ready".
Si vous utilisez ProvidePlugin dans votre configuration WebPack, assurez-vous de la configurer comme suit:
plugins: [
new webpack . ProvidePlugin ( {
'Holder' : 'holderjs' ,
'holder' : 'holderjs' ,
'window.Holder' : 'holderjs'
} )
] Le titulaire est fourni dans le cadre de la licence du MIT.
Holder est un projet d'Ivan Malopinsky.
