Advanced Configuration

Fade In

We recommend using a fade-in effect because it adds a nice transition when images are ready to load. We made it disabled by default, because you may want to add your transitions too. Below is an example of how to use it:

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

Lazyloading

This is a default feature. To disable it you would need to make it equal false explicitly.

There are two configurable parameters: batch interval and batch size. When a visitor starts scrolling, our SDK starts fetching groups of images. Batch size defines how many images can be fetched at once. The batch interval defines how fast we should switch to the next batch.

If you have a grid of many small images per screen, then we recommend setting batchSize up to 10. If there are one or two images per screen, then batchSize should be much smaller. For batchInterval it's the opposite. You can tweak these parameters and find an optimal combination for your layout or just keep the defaults.

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

Before-Render Hook

This is an efficient way to add custom UI logic for each image. This function is applied to each one of them and triggered right before it's ready to render. You can add or remove special CSS classes or configure special 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. Progressive loading is disabled by default. Add progressive: true to activate it.

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

Fallback

This is a useful feature if you want to make sure that images are loaded no matter what. Initially, we fetch an image from the CDN and if something goes wrong (ex: unexpected image source) we render the original image.

It is automatically activated when you add fadeIn or beforeRender.

Add fallback: true to activate the fallback explicitly:

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

Questions?

We’re always happy to help with code, integration, and other stuff.
Search our site for more info or post your question in our Community Area.