Usage
Normal <img /> tags, supplied with data-imgplaceholder
attribute:
[sourcecode language=”xml”]
<img data-imgplaceholder />
<img data-imgplaceholder width="200" height="100" />
<img data-imgplaceholder data-label="Custom Label" data-border-width="20" data-border-color="#b01e00" data-bgcolor="#f3b200" data-forecolor="#b01e00" />
<img data-imgplaceholder data-forecolor="#333" data-bgcolor="#00c13f" width="200" height="130" />
<img data-imgplaceholder data-border-color="#e34c26" data-label="HTML5, SVG and JavaScript" data-bgcolor="#f6f6f6" width="300" height="200" />
<img data-imgplaceholder data-forecolor="#333" data-border-width="20" data-bgcolor="#00c13f" width="200" height="140" />
[/sourcecode]
HTML Attributes
Any standard HTML attributes for images like width
, height
, title
, alt
, etc plus the following class-specific attributes:
data-imgplaceholder
– Required attribute, which marks the image tag as a placeholder.data-label
– Allows optional label for the placeholder. Default value is width x height
.data-forecolor
– Optional label color. Default value is #666
.data-bgcolor
– Optional background color. Default value is #d4d0c8
.data-border-width
– Optional border width. Default value is 10
.data-border-color
– Optional border color. Default value is #666
.Methods
render
– The method is invoked automatically on page load, but it can be called also manually to create image placeholders on demand.Supported Browsers
Any SVG-capable browser.
Check the AcidJs.ImgPlaceholder here. If you are also looking for similar text placeholders you may also want to give a try to XLipsum – a HTML5 WebComponent that can generate Lorem Ipsum texts in various formats.
© 2006 - 2023 Martin Ivanov