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 and 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 like so:
<div class="twic-view"> <!-- content --> </div>
In that case, every marked element inside of the container will be loaded as soon as the container 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 class="twic-view"> <!-- no lazy loading! --> </body>
The Script is always observing changes in your document:
The Script happens to mark 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:
imgsource image is being loaded
imgsource image has been loaded
twic-errorwhen an error occured while loading an
twic-background-loadingwhen at least one of the background images of an element is being loaded
twic-background-donewhen all background images of an element have been loaded
twic-background-errorwhen an error occured while loading one of the background images