Dload-lazy-load

Dload is a lazy-load plugin for elements and images. It's easily adjustable and easy in use

Installation

npm i dload-lazyload

In your js.

import dload from 'dload-lazyload';

document.addEventListener('DOMContentLoaded', () => {
  dload();
});

Or with custom settings

import dload from 'dload-lazyload';

document.addEventListener('DOMContentLoaded', () => {
  dload({
    className: 'your-custom-class',
    loadedClass: 'classname-when-in-view',
    singleSource: true,
  });
});

Custom options

| Option | Description | Default Value | Custom value type | | ------------- |:-------------| -------------- | ------------- | | className | Class name of elements that will be lazy loaded | lazy-load | string | | loadedClass | Class name that will be added once in viewport | lazy-loaded | string | | singleSource | Boolean to define a single source instead of multi sources | false | bool |

In your scss.

@import 'dload-lazyload/src/styles/variables';
@import 'dload-lazyload/src/styles/dload-lazyload';

Your HTML markup

Basic multisource markup

<figure 
    class="lazy-load"
    data-srcset='{
        "default":"./assets/img/img.jpg",
        "defaultRetina": "./assets/img/imgRetina.jpg",
      }'
  >

But there are some other images avaiable to. For optimal performance for mobile/tablet we've added a couple more sources, which you can devide by a ,.

In the following example you can see all of the possible options.

<figure
    class="lazy-load"
    data-srcset='{
      "base": "https://example.com/dir/to/img/folder/",
      "default": "image1.jpg",
      "defaultRetina": "[email protected]",
      "mobile": "image2.jpg",
      "mobileRetina": "[email protected]",
      "tablet": "image3.jpg",
      "tabletRetina": "[email protected]"
    }'
  >

Basic singleSource markup

<figure 
    class="lazy-load"
    data-srcset='./assets/img/img.jpg'
  >

And now you're ready to go.

Transition classes

For transition classes I've decided to go with reveal.

Example:

<figure 
  class="lazy-load reveal reveal--up"
  data-srcset='{
    "default":"./assets/img/img.jpg",
    "defaultRetina": "./assets/img/imgRetina.jpg",
  }'
>

There are multiple pre made classes for you to use and change.

• reveal--fade (can be used with any other class)
• reveal--up (transforms bottom to top)
• reveal--left (transforms right to left)
• reveal--right (transforms left to right)

There are some variables that you're able to change: Simply reset the variable to your liking.

• $dload-transition: cubic-bezier(0.165, 0.84, 0.44, 1) !default;
• $dload-transition-speed: 600ms !default;
• $dload-transform-value: 40px !default;
• $dload-delays: 100 300 600 900 !default;

Delays

If you want delays on your animations you can either set a class like reveal--500. This class is generated by the $delays variable. Simply add or remove values to create extra classes.

Example:

<figure 
  class="lazy-load reveal reveal--up reveal--600"
  data-srcset='{
    "default":"./assets/img/img.jpg",
    "defaultRetina": "./assets/img/imgRetina.jpg",
  }'
>

If you want a random delay you can add the class reveal--random and a random valye between 0 and 500ms will be set on the element

Example:

<figure 
  class="lazy-load reveal reveal--up reveal--random"
  data-srcset='{
    "default":"./assets/img/img.jpg",
    "defaultRetina": "./assets/img/imgRetina.jpg",
  }'
>