holder
1.0.0
持有人使用SVG在瀏覽器中渲染圖像佔位符。
由成千上萬的開源項目（包括Bootstrap V3）和許多其他站點使用。
沒有額外的請求，小捆尺寸，高度可定制。
npm install holderjsyarn add holderjsbower install holderjsgem 'rails-assets-holderjs'meteor add imsky:holderphp composer.phar update imsky/holderInstall-Package Holder.js 在您的html中包括holder.js ：
< script src =" holder.js " > </ script >然後，持有人將使用特定的src屬性處理所有圖像，例如：
< img src =" holder.js/300x200 " >上面的標籤將成為300像素寬的佔位符，高200像素。
為避免控制台404錯誤，您可以使用data-src而不是src 。
以編程方式插入佔位符使用run() API：
var myImage = document . getElementById ( 'myImage' ) ;
Holder . run ( {
images : myImage
} ) ; 佔位符選項是通過URL屬性設置的，例如holder.js/300x200?x=y&a=b 。多個選項由& Charem分開。
theme ：佔位符的主題。示例： holder.js/300x200?theme=skyrandom ：使用隨機主題。示例： holder.js/300x200?random=yesbg ：背景顏色。示例： holder.js/300x200?bg=2a2025fg ：前景（文字）顏色。示例： holder.js/300x200?fg=fffffftext ：自定義文本。示例： holder.js/300x200?text=Hellosize ：自定義文本大小。默認為pt單元。示例： holder.js/300x200?size=50font ：自定義文本字體。示例： holder.js/300x200?font=Helveticaalign ：自定義文本對齊（左，右）。示例： holder.js/300x200?align=leftoutline ：為佔位符繪製輪廓和對角線。示例： holder.js/300x200?outline=yeslineWrap ：最大線長度與圖像寬度比。示例： holder.js/300x200?lineWrap=0.5持有人包括對主題的支持，以幫助佔位持有人融入您的佈局。
有6個默認主題： sky ， vine ， lava ， gray ， industrial和social 。
主題具有5個屬性： fg ， bg ， size ， font和fontweight 。 size屬性指定主題的最小字體大小。 fontweight默認值是bold 。您可以創建這樣的示例主題：
Holder . addTheme ( "dark" , {
bg : "#000" ,
fg : "#aaa" ,
size : 11 ,
font : "Monaco" ,
fontweight : "normal"
} ) ;如果您有一組佔位符，您想使用特定的文本，可以通過將text屬性添加到主題中來做到這一點：
Holder . addTheme ( "thumbnail" , { bg : "#fff" , text : "Thumbnail" } ) ; 有兩種與持有人使用自定義主題的方法：
第一種方法是最簡單的。包含holder.js後，添加一個添加您想要的主題的script標籤：
< script src =" holder.js " > </ script >
< script >
Holder . addTheme ( "bright" , {
bg : "white" , fg : "gray" , size : 12
} ) ;
</ script >第二種方法要求您在添加主題之後打電話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屬性，第二個是父元素的CSS選擇器。
持有人會自動將線路斷裂添加到圖像邊界之外的文本中。如果文本很長，則可以從水平和垂直邊界出發，則文本將移至頂部。如果您願意控制線路斷裂，則可以將n添加到text屬性：
< 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.&nowrap=true " >使用text選項時，未顯示圖像Dimesions。要將尺寸重新插入文本中，請簡單使用特殊的holder_dimensions佔位符。
< img data-src =" holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions " >由於SVG對跨域資源鏈接的限制，使用Canvas默認使用使用Canvas渲染使用自定義字體的佔位符。如果您僅使用本地可用的字體，則可以通過將noFontFallback設置為true選項Holder.run禁用此行為。但是，如果您需要使用外部加載字體渲染SVG佔位符，則必須使用object標籤代替img標籤，並將holderjs類添加到適當的link標籤中。這是一個例子：
< 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標頭。有關更多詳細信息，請參見如何將CDN與WebFonts一起使用。
<object>佔位符像<img>佔位符一樣工作，並帶來了能夠進行檢查和修改的DOM的額外好處。與<img>佔位符一樣， data-src屬性比data屬性更可靠。
重要：用p字符指定百分比，而不是%字符。
指定百分比的維度會創建一個對媒體查詢做出響應的流體佔位符。
< img data-src =" holder.js/100px75?theme=social " >默認情況下，流體佔位符將顯示其當前大小為像素。要顯示原始尺寸，即100％x75，將textmode Flag設置為literal ： holder.js/100px75?textmode=literal 。
如果您想避免執行圖像大小的支架，請使用auto標誌這樣：
< img data-src =" holder.js/200x200?auto=yes " >以上將使無嵌入CSS的佔位符達到高度或寬度。
要顯示自動佔位持有人的當前大小，請將textmode標誌設置為exact這樣的： holder.js/200x200?auto=yes&textmode=exact 。
調整窗口時，將更新以精確模式的流體佔位符和自動尺寸的佔位符。要設置是否在窗口大小上更新特定圖像，您可以使用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 ：用於查找樣式表的CSS選擇器，以導入SVG佔位符。默認值： head link.holderjs 。noFontFallback ：如果使用自定義字體，請勿倒回畫布。noBackgroundSize ：不要為背景佔位符設置background-size 。您可以通過在包括holder.js （包括holder.js）之後立即執行holder.run來防止持有人通過執行Holder.run來運行其默認配置。但是，您必須再次執行Holder.run才能渲染使用默認配置的任何占位持有人。
持有人與lazyload.js兼容，並與流體和固定寬度圖像一起使用。為了獲得最佳結果，請運行.lazyload({skip_invisible:false}) 。
在React組件中使用持有人時，請執行Holder.run componentDidMount有關更多詳細信息，請參閱此問題。
您可以在帶有Vue-Holderjs的VUE 2+項目中使用持有人。
您可以在具有NG持有人的Angular項目中或與Angular-2-Holderjs一起使用Angular 2項目。
因為默認情況下，流星包含文檔頂部的腳本，因此調用持有人時可能無法完全使用DOM。因此，將與持有人相關的代碼放在“ DOM Ready”事件偵聽器中。
如果您在WebPack配置中使用ProvidePlugin ，請確保將其配置如下：
plugins: [
new webpack . ProvidePlugin ( {
'Holder' : 'holderjs' ,
'holder' : 'holderjs' ,
'window.Holder' : 'holderjs'
} )
] 持有人是根據麻省理工學院許可證提供的。
Holder是Ivan Malopinsky的一個項目。
