Dynamic Behaviour
Lazy Loading
By default, the Script will load marked images only when needed. It will wait for an element to come into view before loading its source, poster or background images. This will help tremendously when it comes to the initial page load.
Sometimes, however, you may need images to be loaded in bulk, like in the case of a slideshow. In such a case, you can mark a container as a view:
<div data-twic-view>
<!-- content -->
</div>
Every marked element inside the container will be loaded as soon as the container itself comes into view.
If, for any reason, you wish to disable lazy loading entirely, simply mark the body of your page as a view:
<body data-twic-view>
<!-- no lazy loading! -->
</body>
DOM Manipulation
The Script is always observing changes in your document:
- it will detect newly inserted elements with a
data-twic-src,data-twic-poster,data-twic-backgroundordata-twic-viewattribute - it will react whenever a TwicPics attribute is modified
- it will re-assess image sizes if dynamic changes occur in your layout
Life Cycles
The Script happens to tag elements with specific classes whenever images are loaded under the hood. This is especially useful if you want to apply a specific CSS effect to images that are being loaded (like a fade-out/fade-in animation) or if you wish to visually highlight errors during development (like coloring problematic elements in red).
Here are the classes the Script will mark elements with:
twic-loadingwhen animgorvideosource is being loadedtwic-donewhen animgorvideosource has been loadedtwic-errorwhen an error occurred while loading animgorvideosourcetwic-poster-loadingwhen avideoposter is being loadedtwic-poster-donewhen avideoposter has been loadedtwic-poster-errorwhen an error occurred while loading avideopostertwic-background-loadingwhen at least one of the background images of an element is being loadedtwic-background-donewhen all background images of an element have been loadedtwic-background-errorwhen an error occurred while loading one of the background images
