Optimy

Optimy is a js-plugin for lazy loading of scripts, styles and other resources, which speeds up page loading on the client side. It works on the basis of the IntersectionObserver class.

---

Browser support

For browsers that do not support the observer class, you must use the polyfill intersection-observer.js. There are two main ways to do this:

1. Connect in the HTML code using the script tag

   <script src="/js/intersection-observer.js"></script>
   <script src="/js/optimy.js"></script>

2. Change the property polyfill in your js file after connecting the plugin

   Optimy.polyfill = '/js/intersection-observer.js';

---

Usage

The methods loadStyle and loadScript load script and style accordingly and have arguments:

• url is a url (src/href) of resource
• onload is a function that will run after the resource is loaded
• isAsync (for loadScript only) is an argument that allows the script to load asynchronously (by default true)

loadResource is a common method for loading different resources and have three arguments:

• tag is a html tag of resource (script, link)
• attrs is an object of tag attributes
• runOnload is an argument that runs onload event or don't if the resource has already been loaded (by default true).

That three methods will be loaded resource only once.

The methods lazyLoad (for lazy loading of img and backgrounds images) and obsLoad (for lazy loading of resouces) use IntersectionObserver class and have one argument:

• settings is an object in which you may to specify:
  • targets is may be a collection (NodeList) or an element (HTMLElement)
  • callback is a callback function. By default, the lazyLoad method uses a method imagesCallback that runs the callback for every visible element in the viewport individually. For the obsLoad method you should to use the method resourcesCallback that runs the callback once if some element becomes visible in the viewport.
  • options is an object of IntersectionObserver options. You can read more about the options on the official website MDN.
  • attribute (for lazyLoad only) is an attribute name for lazy loading (by default data-src)
  • loadingLazy (for lazyLoad only) is a value for attribute loading="lazy" for a browser that supports this feature (by default true)

Example:

const targets = document.querySelectorAll('.swiper');

const observerObject = new Optimy.obsLoad({
    targets: targets,
    options: {
        rootMargin: '30%',
        threshold: 0.0
    },
    callback: Optimy.resourcesCallback(function() {
        Optimy.loadStyle('/css/swiper.min.css', function() {
            console.log('swiper.min.css has been loaded!');

            Optimy.loadScript('/js/swiper-bundle.min.js', function() {
                console.log('swiper-bundle.min.js has been loaded!');
            });
        });
    })
});