Home

Customization

You can customize Greta's default settings by adding a GretaOptions object in a script tag placed before the main script.

<html>
<head>

<script>
    GretaOptions = {
      accessToken: ''
    }
</script>
<script src="https://cdn.greta.io/greta.min.js"></script>

</head>
<body>

Peer-to-peer

Peer-to-peer can be turned on/off with the enable boolean, and the algorithm is specified with the mode. The mode sets the algorithm for the script, where performance optimizes for the best end user experience and offload focus on offloading your servers.

Default options are displayed in the snippet below:

<script>
    GretaOptions = {
      p2p: {
        enable: true,
        mode: 'performance' // performance or offload
      }
    }
</script>

Cache

Greta cache is configured with time and version. time is the caching time for every element stored in the user’s browser cache, which is calculated in milliseconds. version enforces to clear all the user’s cache instantly, by simply increment it. time is by default, and preferably, longer than a normal browser cache time, due to the purging with the version.

Default options are displayed in the snippet below:

<script>
    GretaOptions = {
      cache: {
        version: 1,            // Increment to clear cache
        time: 365*24*3600*1000 // Time to live on cache
      }
    }
</script>

Lazy loading

Greta lazy loader can be configured to replace a previous lazy loading solution seamlessly. imgAttribute is the name of the lazy loading attribute holding the url. This is the tag that Greta will look for when parsing images on page load. bgImgAttribute works in the same fashion but applies the url the background-image style of the element instead. Their defaults is displayed in the snippet below.

In addition to specifying your lazy loading attribute, you have the option of appending a CSS class on load with the addClassOnLoad attribute. This is setting is optional and is not specified by default.

The range for lazy loading is also adjustable, with the offset setting. Offset sets the range for when an asset is within the lazy loading scope. Offset is a scale of the screen height, for example: 2 means adding another 100% of the screen height being in the active lazy loading scope, 1.2 corresponds to adding another 20% etc.

Default options are displayed in the snippet below:

<script>
    GretaOptions = {
      lazyLoad: {
        offset: 2,                    // Screen offset
        addClassOnLoad: '',           // Class on load
        imgAttribute: 'data-src',     // Image tag
        bgImgAttribute: 'data-bg-src' // Background tag
      }
    }
</script>