holder
1.0.0
Holder macht Image -Platzhalter im Browser mit SVG.
Wird von Tausenden von Open -Source -Projekten (einschließlich Bootstrap V3) und vielen anderen Websites verwendet.
Keine zusätzlichen Anfragen, kleine Bündelgröße, sehr anpassbar.
npm install holderjsyarn add holderjsbower install holderjsgem 'rails-assets-holderjs'meteor add imsky:holderphp composer.phar update imsky/holderInstall-Package Holder.js Geben Sie holder.js in Ihr HTML ein:
< script src =" holder.js " > </ script > Holder verarbeitet dann alle Bilder mit einem bestimmten src -Attribut wie dieses:
< img src =" holder.js/300x200 " >Das obige Tag wird als Platzhalter 300 Pixel breit und 200 Pixel hoch.
Um Konsolen 404-Fehler zu vermeiden, können Sie data-src anstelle von src verwenden.
Um einen Platzhalter programmgesteuert einzufügen, verwenden Sie die run() -API:
var myImage = document . getElementById ( 'myImage' ) ;
Holder . run ( {
images : myImage
} ) ; Platzhalteroptionen werden über URL -Eigenschaften eingestellt, z. B. holder.js/300x200?x=y&a=b . Mehrere Optionen werden durch das & Zeichen getrennt.
theme : Das Thema für den Platzhalter. Beispiel: holder.js/300x200?theme=skyrandom : Verwenden Sie zufälliges Thema. Beispiel: holder.js/300x200?random=yesbg : Hintergrundfarbe. Beispiel: holder.js/300x200?bg=2a2025fg : Vordergrund (Text) Farbe. Beispiel: holder.js/300x200?fg=fffffftext : Benutzerdefinierte Text. Beispiel: holder.js/300x200?text=Hellosize : Benutzerdefinierte Textgröße. Standardeinstellungen zu pt -Einheiten. Beispiel: holder.js/300x200?size=50font : Benutzerdefinierte Textschrift. Beispiel: holder.js/300x200?font=Helveticaalign : benutzerdefinierte Textausrichtung (links, rechts). Beispiel: holder.js/300x200?align=leftoutline : Zeichnen Sie Umriss und Diagonale für Platzhalter. Beispiel: holder.js/300x200?outline=yeslineWrap : Maximales Verhältnis von Länge zu Bildbreite. Beispiel: holder.js/300x200?lineWrap=0.5Inhaber beinhaltet die Unterstützung für Themen, um den Platzhaltern bei Ihrem Layout zu helfen.
Es gibt 6 Standardthemen: sky , vine , lava , gray , industrial und social .
Themen haben 5 Eigenschaften: fg , bg , size , font und fontweight . Die size -Eigenschaft gibt die minimale Schriftgröße für das Thema an. Der Standardwert fontweight ist bold . Sie können ein Beispielthema wie dieses erstellen:
Holder . addTheme ( "dark" , {
bg : "#000" ,
fg : "#aaa" ,
size : 11 ,
font : "Monaco" ,
fontweight : "normal"
} ) ; Wenn Sie eine Gruppe von Platzhaltern haben, in denen Sie einen bestimmten Text verwenden möchten, können Sie dies tun, indem Sie dem Thema eine text hinzufügen:
Holder . addTheme ( "thumbnail" , { bg : "#fff" , text : "Thumbnail" } ) ; Es gibt zwei Möglichkeiten, um benutzerdefinierte Themen mit Holder zu verwenden:
Der erste Ansatz ist der einfachste. Nachdem Sie holder.js eingefügt haben, fügen Sie ein script -Tag hinzu, das das gewünschte Thema hinzufügt:
< script src =" holder.js " > </ script >
< script >
Holder . addTheme ( "bright" , {
bg : "white" , fg : "gray" , size : 12
} ) ;
</ script > Der zweite Ansatz erfordert, dass Sie run anrufen, nachdem Sie das Thema hinzufügen, wie folgt:
Holder . addTheme ( "bright" , { bg : "white" , fg : "gray" , size : 12 } ) . run ( ) ; Sie können Holder in verschiedenen Bereichen auf verschiedenen Bildern mit benutzerdefinierten Themen verwenden:
< 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"
} ) ; Sie können einen Platzhalter programmgesteuert hinzufügen, indem Sie Inhalter -Anrufe verketten:
Holder . addTheme ( "new" , {
fg : "#ccc" ,
bg : "#000" ,
size : 10
} ) . addImage ( "holder.js/200x100?theme=new" , "body" ) . run ( ) ; Das erste Argument in addImage ist das src -Attribut, und das zweite ist ein CSS -Selektor des übergeordneten Elements.
Holder fügt automatisch Zeilenumbrüche zum Text hinzu, der außerhalb der Bildgrenzen liegt. Wenn der Text so lang ist, dass er sowohl aus horizontalen als auch aus vertikalen Grenzen verläuft, wird der Text nach oben verschoben. Wenn Sie es vorziehen, die Zeilenumbrüche zu steuern, können Sie der text n hinzufügen:
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere. " > Wenn Sie die Zeilenverpackung deaktivieren möchten, stellen Sie die nowrap -Option auf true ein:
< img data-src =" holder.js/300x200?text=Add n line breaks n anywhere.&nowrap=true " > Bei Verwendung der text werden die Bilddimsionen nicht angezeigt. Um die Dimension in den Text wieder einzubeziehen, verwenden Sie einfach den Platzhalter für Special holder_dimensions .
< img data-src =" holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions " > Platzhalter, die eine benutzerdefinierte Schriftart verwenden, werden standardmäßig mit Leinwand aufgrund der Einschränkungen von SVG für die Verknüpfung der Cross-Domain-Ressourcen gerendert. Wenn Sie nur lokal verfügbare Schriftarten verwenden, können Sie dieses Verhalten deaktivieren, indem Sie noFontFallback in den Optionen Holder.run true . Wenn Sie jedoch einen SVG -Platzhalter mit einer extern geladenen Schriftart rendern müssen, müssen Sie das object -Tag anstelle des img -Tags verwenden und den entsprechenden link -Tags eine holderjs -Klasse hinzufügen. Hier ist ein Beispiel:
< head >
< link href =" http://.../font-awesome.css " rel =" stylesheet " class =" holderjs " >
</ head >
< body >
< object data-src =" holder.js/300x200?font=FontAwesome " > </ object > WICHTIG: Beim lokalen Testen muss Schrift URLs ein http oder https -Protokoll definiert sein.
WICHTIG: Schriftarten, die von anderen Standorten als öffentliche Registrien (dh Google -Schriftarten, Typkit usw.) bedient werden, erfordern die richtigen CORS -Header. Weitere Informationen finden Sie unter der Verwendung von CDN mit Webfonts.
<object> Platzhalter arbeiten wie <img> Platzhalter, mit dem zusätzlichen Vorteil, dass ihr DOM inspiziert und geändert werden kann. Wie bei <img> -Abehalten ist das data-src Attribut zuverlässiger als das data .
Wichtig: Prozentsätze werden mit dem p -Zeichen angegeben, nicht mit dem % -Scharakter.
Durch die Angabe einer Dimension in Prozentsätzen werden ein flüssiger Platzhalter erzeugt, der auf Medienfragen reagiert.
< img data-src =" holder.js/100px75?theme=social " > Standardmäßig zeigt der flüssige Platzhalter seine aktuelle Größe in Pixeln. Um die ursprünglichen Abmessungen, dh 100%x75, anzuzeigen, setzen Sie das textmode -Flag auf literal wie SO: holder.js/100px75?textmode=literal .
Wenn Sie vermeiden möchten, dass Halter eine Bildgröße durchsetzt, verwenden Sie die auto Flagge wie SO:
< img data-src =" holder.js/200x200?auto=yes " >Die oben genannte wird einen Platzhalter ohne eingebettete CSS für die Höhe oder Breite machen.
Um die aktuelle Größe eines automatisch großen Platzhalters anzuzeigen, setzen Sie das textmode -Flag auf exact wie SO: holder.js/200x200?auto=yes&textmode=exact .
Sowohl flüssige Platzhalter als auch automatisch große Platzhalter im genauen Modus werden aktualisiert, wenn das Fenster geändert wird. Um festzustellen, ob ein bestimmtes Bild in der Fenster -Größe aktualisiert wird oder nicht, können Sie die setResizeUpdate -Methode wie SO verwenden:
var img = $ ( '#placeholder' ) . get ( 0 ) ;
Holder . setResizeUpdate ( img , false ) ;In der obigen Pause wird alle Render -Updates für das angegebene Bild (das ein DOM -Objekt sein muss).
Um Updates erneut zu aktivieren, führen Sie Folgendes aus:
Holder . setResizeUpdate ( img , true ) ;Dies ermöglicht Aktualisierungen und macht den Platzhalter sofort.
Holder kann Platzhalter als Hintergrundbilder für Elemente mit der holderjs -Klasse wie folgt machen:
# sample { background : url(?holder.js / 200 x200?theme=social) no-repeat} < div id =" sample " class =" holderjs " > </ div > Die Halter -URL in CSS sollte eine haben ? vorne. Wie bei Image-Platzhaltern können Sie die Inhaber-URL in einem data-background-src Attribut angeben:
< div class =" holderjs " data-background-src =" ?holder.js/300x200 " > </ div >Wichtig: Stellen Sie sicher, dass Sie eine Höhe und/oder Breite für Elemente mit Hintergrund -Platzhaltern definieren. Flüssige Hintergrund -Platzhalter werden noch nicht unterstützt.
Holder bietet zur Laufzeit mehrere Optionen, die den Prozess der Bilderzeugung beeinflussen. Diese werden durch Holder.run weitergegeben. Run -Anrufe.
domain : Die Domäne, die für die Bildgenerierung verwendet werden soll. Standardwert: holder.js .dataAttr : Das HTML -Attribut, mit dem ein Fallback des nativen src -Attributs definiert wird. Standardwert: data-src .renderer : Der zu verwendende Renderer. Optionen verfügbar: svg , canvas . Standardwert: svg .images : Der CSS -Selektor, der zum Auffinden von img -Tags verwendet wird. Standardwert: img .objects : Der CSS -Selektor, der zum Auffinden object -Platzhaltern verwendet wird. Standardwert: object .bgnodes : Der CSS -Selektor, der zum Auffinden von Elementen mit Hintergrundpalceholdern verwendet wird. Standardwert: body .holderjs .stylenodes : Der CSS -Selektor, der zum Finden von Stylesheets verwendet wird, um in SVG -Platzhalter zu importieren. Standardwert: head link.holderjs .noFontFallback : Fallen Sie nicht zurück zu Canvas, wenn Sie benutzerdefinierte Schriftarten verwenden.noBackgroundSize : Setzen Sie keine background-size für Hintergrund-Platzhalter. Sie können verhindern, dass Holder seine Standardkonfiguration ausführt, indem holder.js Holder.run Ihren benutzerdefinierten Einstellungen ausführen. Sie müssen jedoch Holder.run ausführen. Rendern Sie dies erneut, um alle Platzhalter zu rendern, die die Standardkonfiguration verwenden.
Holder ist mit lazyload.js kompatibel und funktioniert sowohl mit flüssigen als auch mit festen Breitenbildern. Für beste Ergebnisse führen Sie .lazyload({skip_invisible:false}) ausführen.
Führen Sie bei der Verwendung von Halter in einer React -Komponente Holder.run in componentDidMount aus, um das Rendering nach Zustandsänderungen zu ermöglichen. Weitere Informationen finden Sie in dieser Ausgabe.
Sie können Holder in Vue 2+ -Projekten mit Vue-Halterjs verwenden.
Sie können Holder in Angular-Projekten mit NG-Halter oder mit Angular-2-Halterjs für Angular 2-Projekte verwenden.
Da Meteor standardmäßig Skripte ganz oben im Dokument enthält, ist das DOM möglicherweise nicht vollständig verfügbar, wenn der Inhaber aufgerufen wird. Aus diesem Grund haben Sie den Code in einem "DOM-Ready" -Ereigner-Hörer in einem "DOM-Ready" -Listener.
Wenn Sie mit ProvidePlugin in Ihrer Webpack -Konfiguration verwenden, konfigurieren Sie dies wie folgt:
plugins: [
new webpack . ProvidePlugin ( {
'Holder' : 'holderjs' ,
'holder' : 'holderjs' ,
'window.Holder' : 'holderjs'
} )
] Inhaber wird im Rahmen der MIT -Lizenz bereitgestellt.
Holder ist ein Projekt von Ivan Malopinsky.
