Advanced Configuration

You can customize your Adaptive Delivery experience through our Advanced Configuration options.

Image fade-in

We recommend using a fade-in effect to add a smooth visual transition once images are ready to load. Fade In is disabled by default since you might be using other transition effects on your end. Here’s how you enable the option,

Blinkloader.optimize({
  pubkey: 'YOUR_PUBLIC_KEY',
  fadeIn: true
})

Lazy loading

Lazy-loading is enabled by default. You can explicitly turn it off or customize the behavior.

There are two configurable parameters: “batch interval” and “batch size.” When your page visitors engage in scrolling, our SDK starts fetching images in batches. “Batch size” defines the number of images for a single fetch, while “batch interval” sets the interval between loading batches, in milliseconds.

If you have many images laid out in a grid, we recommend setting batchSize to 10. If there are one or two images per screen, batchSize should be kept smaller. For batchInterval, it’s vice-versa. You can tweak the parameters to find an optimal combination for your layout or stick with the defaults.

If you’re implementing a different lazy-loading mechanic, you can switch off the option by setting lazyload to false,

Blinkloader.optimize({
  pubkey: 'YOUR_PUBLIC_KEY',
  lazyload: true, // true by default
  batchInterval: 250, // 250ms by default
  batchSize: 10, // 5 by default
})

Before-render hook

Implementing the before-render hook is an efficient way to add a custom UI logic for each image. The function is applied to every image and gets triggered right before it’s ready to render. You can add or remove CSS classes, configure overlays, etc.

Usage example,

Blinkloader.optimize({
  pubkey: 'YOUR_PUBLIC_KEY',
  beforeRender: function(node) {
    // node is a DOM element of the rendered image
    console.log(node);

    // add special effects or remove preloading overlays
    node.classList.add('cool-transition')
  }
})

Progressive loading

We noticed that users prefer using a fade-in transition rather than progressive loading. Hence, progressive loading is disabled by default. You explicitly enable the behavior by stating progressive: true,

Blinkloader.optimize({
  pubkey: 'YOUR_PUBLIC_KEY',
  progressive: true
})

Fallback

Fallback is a useful feature if you want to ensure reliable image loading regardless of any conditions. Initially, we serve optimized images from our CDN, and if something goes wrong (unexpected image source, for instance), we render your original image.

Fallback is automatically activated when you use fadeIn or beforeRender.

Setting fallback to true activates the feature explicitly; false disables the behavior,

Blinkloader.optimize({
  pubkey: 'YOUR_PUBLIC_KEY',
  fallback: true // false by default, becomes true if fadeIn or beforeRender are specified
})