holder

ホルダー

ホルダーは、SVGを使用してブラウザで画像プレースホルダーをレンダリングします。

数千のオープンソースプロジェクト（Bootstrap V3を含む）および他の多くのサイトで使用されています。

追加のリクエスト、小さなバンドルサイズ、高度にカスタマイズ可能。

インストール

• NPM： npm install holderjs
• 糸： yarn add holderjs
• UNPKG：https：//unpkg.com/holderjs
• cdnjs：https：//cdnjs.com/libraries/holder
• jsdelivr：https：//www.jsdelivr.com/package/npm/holderjs
• Bower： bower install holderjs
• Rails Assets： gem 'rails-assets-holderjs'
• Meteor： meteor add imsky:holder
• 作曲家： php composer.phar update imsky/holder
• nuget： Install-Package Holder.js

使用法

htmlにholder.jsを含める：

 < script src =" holder.js " > </ script >

保有者は、このような特定のsrc属性ですべての画像を処理します。

 < img src =" holder.js/300x200 " >

上記のタグは、幅300ピクセル、高さ200ピクセルのプレースホルダーとしてレンダリングされます。

コンソール404エラーを避けるために、 srcの代わりにdata-srcを使用できます。

プログラマティック使用

プログラムでプレースホルダーを挿入するにはrun() APIを使用します。

 var myImage = document . getElementById ( 'myImage' ) ;

Holder . run ( {
  images : myImage
} ) ; 

プレースホルダーオプション

holder.js/300x200?x=y&a=bホルダーオプションは、URLプロパティを介して設定されます。複数のオプションは、 &キャラクターによって区切られています。

• theme ：プレースホルダーに使用するテーマ。例： holder.js/300x200?theme=sky
• random ：ランダムテーマを使用します。例： holder.js/300x200?random=yes
• bg ：背景色。例： holder.js/300x200?bg=2a2025
• fg ：前景（テキスト）色。例： holder.js/300x200?fg=ffffff
• text ：カスタムテキスト。例： holder.js/300x200?text=Hello
• size ：カスタムテキストサイズ。デフォルトはptユニットです。例： holder.js/300x200?size=50
• font ：カスタムテキストフォント。例： holder.js/300x200?font=Helvetica
• align ：カスタムテキストアラインメント（左、右）。例： holder.js/300x200?align=left
• outline ：プレースホルダーのアウトラインと対角線を描画します。例： holder.js/300x200?outline=yes
• lineWrap ：画像幅の最大長から画像幅比。例： holder.js/300x200?lineWrap=0.5

テーマ

ホルダーには、プレースホルダーがレイアウトに溶け込むのを支援するために、テーマのサポートが含まれています。

sky 、 vine 、 lava 、 gray 、 industrial 、およびsocial 6つのデフォルトテーマがあります。

テーマのカスタマイズ

テーマには、 fg 、 bg 、 size 、 font 、 fontweight 5つのプロパティがあります。 sizeプロパティは、テーマの最小フォントサイズを指定します。 fontweightデフォルト値はboldです。次のようなサンプルテーマを作成できます。

 Holder . addTheme ( "dark" , {
  bg : "#000" ,
  fg : "#aaa" ,
  size : 11 ,
  font : "Monaco" ,
  fontweight : "normal"
} ) ;

特定のテキストを使用したいプレースホルダーのグループがある場合は、テーマにtextプロパティを追加して、次のことを行うことができます。

 Holder . addTheme ( "thumbnail" , { bg : "#fff" , text : "Thumbnail" } ) ; 

カスタムテーマの使用

ホルダーでカスタムテーマを使用するには、次の2つの方法があります。

• ランタイムにテーマを含めて、すでにテーマ名を使用してプレースホルダーをレンダリングします
• 任意の時点にテーマを含め、テーマ名を使用しているプレースホルダーを再レンダリングする

最初のアプローチが最も簡単です。 holder.jsを含めたら、必要なテーマを追加するscriptタグを追加します。

 < script src =" holder.js " > </ script >
< script >
Holder . addTheme ( "bright" , {
  bg : "white" , fg : "gray" , size : 12
} ) ;
</ script >

2番目のアプローチでは、このようなテーマを追加した後、 runを呼び出す必要があります。

 Holder . addTheme ( "bright" , { bg : "white" , fg : "gray" , size : 12 } ) . run ( ) ; 

特定の画像でカスタムテーマとドメインを使用します

カスタムテーマを備えたさまざまな画像のさまざまな領域のホルダーを使用できます。

 < 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"
} ) ; 

カスタムテーマで画像を挿入します

ホルダーコールをチェーンすることで、プログラムでプレースホルダーを追加できます。

 Holder . addTheme ( "new" , {
  fg : "#ccc" ,
  bg : "#000" ,
  size : 10
} ) . addImage ( "holder.js/200x100?theme=new" , "body" ) . run ( ) ;

addImageの最初の引数はsrc属性であり、2番目は親要素のCSSセレクターです。

文章

ホルダーは、画像の境界の外側にあるテキストにラインブレークを自動的に追加します。テキストが非常に長い場合、水平境界と垂直境界の両方から抜け出すと、テキストは上部に移動されます。ラインブレークを制御したい場合は、 textプロパティにnを追加できます。

 < img data-src =" holder.js/300x200?text=Add n line breaks n anywhere. " >

ラインラッピングを無効にしたい場合は、 nowrapオプションをtrueに設定します。

 < img data-src =" holder.js/300x200?text=Add n line breaks n anywhere.&amp;nowrap=true " >

textオプションを使用する場合、画像のダイムは表示されません。次元をテキストに再挿入するには、Special holder_dimensionsプレースホルダーを簡単に使用します。

 < img data-src =" holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions " >

カスタムフォントを使用するプレースホルダーは、クロスドメインリソースのリンクに対するSVGの制約により、デフォルトでキャンバスを使用してレンダリングされます。ローカルで利用可能なフォントのみを使用している場合、 noFontFallback Holder.runオプションでtrueに設定することにより、この動作を無効にすることができます。ただし、外部ロードされたフォントを使用してSVGプレースホルダーをレンダリングする必要がある場合は、 imgタグの代わりにobjectタグを使用して、適切なlinkタグにholderjsクラスを追加する必要があります。これが例です：

 < head >
< link href =" http://.../font-awesome.css " rel =" stylesheet " class =" holderjs " >
</ head >
< body >
< object data-src =" holder.js/300x200?font=FontAwesome " > </ object >

重要：ローカルでテストする場合、フォントURLにはhttpまたはhttpsプロトコルが定義されている必要があります。

重要：パブリックレジストリ（Googleフォント、TypeKitなど）以外の場所から提供されるフォントは、正しいCORSヘッダーを設定する必要があります。詳細については、WebFontsでCDNの使用方法をご覧ください。

<object>プレースホルダーは、 <img>プレースホルダーのように機能し、DOMを検査および修正できるという利点が追加されています。 <img>プレースホルダーと同様に、 data-src属性はdata属性よりも信頼性が高くなります。

流動的なプレースホルダー

重要：パーセンテージは、 %文字ではなくp文字で指定されます。

パーセンテージのディメンションを指定すると、メディアクエリに応答する流体のプレースホルダーが作成されます。

 < img data-src =" holder.js/100px75?theme=social " >

デフォルトでは、Fluidプレースホルダーは現在のサイズをピクセルで表示します。元の寸法、つまり100％x75を表示するには、 textmodeフラグholder.js/100px75?textmode=literal literalに設定します。

自動的にサイズのプレースホルダー

ホルダーが画像サイズを施行しないようにしたい場合は、次のようなautoフラグを使用します。

 < img data-src =" holder.js/200x200?auto=yes " >

上記は、高さまたは幅のためにCSSを埋め込んでプレースホルダーをレンダリングします。

自動サイズのプレースホルダーの現在のサイズを表示するには、 textmodeフラグholder.js/200x200?auto=yes&textmode=exact exactに設定します。

ウィンドウの更新のサイズ変更を防ぎます

Fluidプレースホルダーと正確なモードの自動サイズのプレースホルダーの両方が、ウィンドウのサイズ変更時に更新されます。特定の画像がウィンドウのサイズ変更で更新されるかどうかを設定するには、次のようなsetResizeUpdateメソッドを使用できます。

 var img = $ ( '#placeholder' ) . get ( 0 ) ;
Holder . setResizeUpdate ( img , false ) ;

上記は、指定された画像のレンダリング更新（DOMオブジェクトである必要があります）を一時停止します。

更新を再度有効にするには、以下を実行してください。

 Holder . setResizeUpdate ( img , true ) ;

これにより、更新が可能になり、すぐにプレースホルダーがレンダリングされます。

バックグラウンドプレースホルダー

ホルダーは、このようなholderjsクラスの要素の背景画像としてプレースホルダーをレンダリングできます。

 # sample { background : url(?holder.js / 200 x200?theme=social) no-repeat}

 < div id =" sample " class =" holderjs " > </ div >

CSSのホルダーURLには?前に。画像のプレースホルダーと同様に、 data-background-src属性でホルダーURLを指定できます。

 < div class =" holderjs " data-background-src =" ?holder.js/300x200 " > </ div >

重要：バックグラウンドのプレースホルダーを持つ要素の高さおよび/または幅を必ず定義してください。流動的なバックグラウンドのプレースホルダーはまだサポートされていません。

ランタイム設定

ホルダーは、画像生成のプロセスに影響を与える実行時にいくつかのオプションを提供します。これらは、 Holder.runコールを介して渡されます。

• domain ：画像生成に使用するドメイン。デフォルト値： holder.js 。
• dataAttr ：ネイティブsrc属性へのフォールバックを定義するために使用されるHTML属性。デフォルト値： data-src 。
• renderer ：使用するレンダラー。利用可能なオプション： svg 、 canvas 。デフォルト値： svg 。
• images ： imgタグの検索に使用されるCSSセレクター。デフォルト値： img 。
• objects ： objectプレースホルダーを見つけるために使用されるCSSセレクター。デフォルト値： object 。
• bgnodes ：パルセホルダーを持つ要素を見つけるために使用されるCSSセレクター。デフォルト値： body .holderjs 。
• stylenodes ：SVGプレースホルダーにインポートするスタイルシートを見つけるために使用されるCSSセレクター。デフォルト値： head link.holderjs 。
• noFontFallback ：カスタムフォントを使用している場合は、キャンバスに戻らないでください。
• noBackgroundSize ：バックグラウンドプレースホルダーにbackground-sizeを設定しないでください。

ロード時にカスタム設定を使用します

holder.jsを含めた直後に、 Holder.run実行することにより、Holder.runを実行することにより、ホルダーがデフォルトの構成を実行するのを防ぐことができます。ただし、デフォルトの構成を使用するプレースホルダーをレンダリングするには、 Holder.runを再度実行する必要があります。

lazyload.jsで使用します

ホルダーはlazyload.jsと互換性があり、流体と固定幅の両方の画像と動作します。最良の結果を得るには、run .lazyload({skip_invisible:false}) 。

Reactで使用します

HolderをReactコンポーネントで使用する場合は、 componentDidMountでHolder.runを実行して、状態変更後にレンダリングを有効にします。詳細については、この問題を参照してください。

Vueで使用します

Vue-Holderjsを使用して、Vue 2+プロジェクトでホルダーを使用できます。

angular.jsで使用します

Angular 2プロジェクトには、NG-HolderまたはAngular-2-Holderjsを使用して、Angularプロジェクトでホルダーを使用できます。

Meteorで使用します

Meteorにはデフォルトでドキュメントの上部にスクリプトが含まれているため、ホルダーが呼び出されたときにDOMが完全に利用できない場合があります。このため、「DOM Ready」イベントリスナーにホルダー関連のコードを配置します。

Webpackで使用します

Webpack構成でProvidePluginを使用している場合は、次のように構成してください。

plugins: [
  new webpack . ProvidePlugin ( {
    'Holder' : 'holderjs' ,
    'holder' : 'holderjs' ,
    'window.Holder' : 'holderjs'
  } )
] 

ブラウザのサポート

• クロム
• Firefox 3+
• Safari 4+
• インターネットエクスプローラー9+（6-8の部分的なサポートを伴う）
• オペラ12+
• Android（フォールバック付き）

ソース

• Github：https：//github.com/imsky/holder
• gitlab：https：//gitlab.com/imsky/holder

ライセンス

保有者はMITライセンスの下で提供されます。

クレジット

ホルダーは、Ivan Malopinskyのプロジェクトです。