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的一个项目。
