在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):imsky/holder开源软件地址(OpenSource Url):https://github.com/imsky/holder开源编程语言(OpenSource Language):JavaScript 94.5%开源软件介绍(OpenSource Introduction):HolderHolder renders image placeholders in browser using SVG. Used by thousands of open source projects (including Bootstrap v3) and many other sites. No extra requests, small bundle size, highly customizable. Installing
UsageInclude <script src="holder.js"></script> Holder will then process all images with a specific <img src="holder.js/300x200"> The above tag will render as a placeholder 300 pixels wide and 200 pixels tall. To avoid console 404 errors, you can use Programmatic usageTo programmatically insert a placeholder use the var myImage = document.getElementById('myImage');
Holder.run({
images: myImage
}); Placeholder optionsPlaceholder options are set through URL properties, e.g.
ThemesHolder includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: Customizing themesThemes have 5 properties: Holder.addTheme("dark", {
bg: "#000",
fg: "#aaa",
size: 11,
font: "Monaco",
fontweight: "normal"
}); If you have a group of placeholders where you'd like to use particular text, you can do so by adding a Holder.addTheme("thumbnail", { bg: "#fff", text: "Thumbnail" }); Using custom themesThere are two ways to use custom themes with Holder:
The first approach is the easiest. After you include <script src="holder.js"></script>
<script>
Holder.addTheme("bright", {
bg: "white", fg: "gray", size: 12
});
</script> The second approach requires that you call Holder.addTheme("bright", {bg: "white", fg: "gray", size: 12}).run(); Using custom themes and domain on specific imagesYou can use Holder in different areas on different images with custom themes: <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"
}); Inserting an image with custom themeYou can add a placeholder programmatically by chaining Holder calls: Holder.addTheme("new", {
fg: "#ccc",
bg: "#000",
size: 10
}).addImage("holder.js/200x100?theme=new", "body").run(); The first argument in TextHolder automatically adds line breaks to text that goes outside of the image boundaries. If the text is so long it goes out of both horizontal and vertical boundaries, the text is moved to the top. If you prefer to control the line breaks, you can add <img data-src="holder.js/300x200?text=Add \n line breaks \n anywhere."> If you would like to disable line wrapping, set the <img data-src="holder.js/300x200?text=Add \n line breaks \n anywhere.&nowrap=true"> When using the <img data-src="holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions"> Placeholders using a custom font are rendered using canvas by default, due to SVG's constraints on cross-domain resource linking. If you're using only locally available fonts, you can disable this behavior by setting <head>
<link href="http://.../font-awesome.css" rel="stylesheet" class="holderjs">
</head>
<body>
<object data-src="holder.js/300x200?font=FontAwesome"></object> Important: When testing locally, font URLs must have a Important: Fonts served from locations other than public registries (i.e. Google Fonts, Typekit, etc.) require the correct CORS headers to be set. See How to use CDN with Webfonts for more details.
Fluid placeholdersImportant: Percentages are specified with the Specifying a dimension in percentages creates a fluid placeholder that responds to media queries. <img data-src="holder.js/100px75?theme=social"> By default, the fluid placeholder will show its current size in pixels. To display the original dimensions, i.e. 100%x75, set the Automatically sized placeholdersIf you'd like to avoid Holder enforcing an image size, use the <img data-src="holder.js/200x200?auto=yes"> The above will render a placeholder without any embedded CSS for height or width. To show the current size of an automatically sized placeholder, set the Preventing updates on window resizeBoth fluid placeholders and automatically sized placeholders in exact mode are updated when the window is resized. To set whether or not a particular image is updated on window resize, you can use the var img = $('#placeholder').get(0);
Holder.setResizeUpdate(img, false); The above will pause any render updates on the specified image (which must be a DOM object). To enable updates again, run the following: Holder.setResizeUpdate(img, true); This will enable updates and immediately render the placeholder. Background placeholdersHolder can render placeholders as background images for elements with the #sample {background:url(?holder.js/200x200?theme=social) no-repeat} <div id="sample" class="holderjs"></div> The Holder URL in CSS should have a <div class="holderjs" data-background-src="?holder.js/300x200"></div> Important: Make sure to define a height and/or width for elements with background placeholders. Fluid background placeholders are not yet supported. Runtime settingsHolder provides several options at runtime that affect the process of image generation. These are passed in through
Using custom settings on loadYou can prevent Holder from running its default configuration by executing lazyload.jsUsing withHolder is compatible with Using with ReactWhen using Holder in a React component, execute Using with VueYou can use Holder in Vue 2+ projects with vue-holderjs. Using with Angular.jsYou can use Holder in Angular projects with ng-holder or with angular-2-holderjs for Angular 2 projects. Using with MeteorBecause Meteor includes scripts at the top of the document by default, the DOM may not be fully available when Holder is called. For this reason, place Holder-related code in a "DOM ready" event listener. Using with WebpackIf you're using plugins: [
new webpack.ProvidePlugin({
'Holder': 'holderjs',
'holder': 'holderjs',
'window.Holder': 'holderjs'
})
] Browser support
Source
LicenseHolder is provided under the MIT License. CreditsHolder is a project by Ivan Malopinsky. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论