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 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>

DOM Manipulation

The Script is always observing changes in your document:

  • it will handle dynamically created elements or already attached elements that are dynamically marked with the twic class
  • it will react whenever image attributes or background attributes are tampered with
  • it will re-assess image sizes if dynamic changes occur in CSS

Life Cycles

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:

  • twic-loading when an img source image is being loaded
  • twic-done when an img source image has been loaded
  • twic-error when an error occured while loading an img source image
  • twic-background-loading when at least one of the background images of an element is being loaded
  • twic-background-done when all background images of an element have been loaded
  • twic-background-error when an error occured while loading one of the background images