Script Set Up
You simply have to include the Script from your own domain in your webpage. It is accessible through
<script async defer src="https://<sub>.twic.pics/?v1"></script>
<sub>with your own subdomain. You can find it in the "Domains" section of the back-office.
That's it, you're all set!
If you want the Script to handle the source of an
img element, the poster of a
video element or the background image of any DOM element, simply specify a
data-twic-background attribute respectively:
<!-- image --> <img data-twic-src="image:<path_to_image>"> <!-- poster --> <video data-twic-poster="image:<path_to_image>"> <!-- background --> <div data-twic-background="url('image:<path_to_image>')">
data-twic-posterand how the background image is now specified in the
data-twic-backgroundattribute rather than in CSS.
In all cases, the source image is
https://<subdomain>.twic.pics/<path_to_image> but the Script will make sure it is sized properly based on the CSS context of the element by generating the proper API calls for you.
The Script will only issue an API call and actually load your image when the corresponding element becomes visible. So everything is lazy-loaded by default given you as fast an initial page load as possible.
You don't have to write any code. Everything is controlled declaratively using HTML attributes and CSS properties. Feel free to browse the rest of the Script documentation for more information.