Naughty Platypus Memorabilia

    responsive-lazy-loader

    0.2.2 • Public • Published

    Responsive Lazy Loader

    npm version Build Status Code Coverage devDependency Status

    Responsive Lazy Loader is a lightweight script that loads your images when they enter the viewport. Not only that but it honours your responsive (srcset) images.

    Installation

    yarn

    yarn add responsive-lazy-loader

    npm

    npm install responsive-lazy-loader

    Usage

    Ensure your <img /> tags have a data-src attribute with a path to your image and a default image src. After you've initialised the script, your images will lazy load out of the box. For example:

    JS:

    import ResponsiveLazyLoader from 'responsive-lazy-loader';
     
    new ResponsiveLazyLoader();

    HTML:

    <img data-src="http://via.placeholder.com/800x600"
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
        alt="My Special Image"
    />

    Once the image comes into view, it will output:

    <img src="http://via.placeholder.com/800x600"
        alt="My Special Image"
    />

    The script also takes into account srcset and sizes by binding them to data attributes. For example:

    <img data-src="http://via.placeholder.com/800x600"
        data-srcset="http://via.placeholder.com/400x300 400w, http://via.placeholder.com/800x600 800w"
        data-sizes="(max-width: 500px) 400px, 800px"
    />

    You can also lazyload picture tags using this ibrary. Please bear in mind that picture tag is not supported in all browsers. In order to make picture tag work you need to use a picture tag polyfill such as picturefill

    <picture>
        <source data-srcset="http://via.placeholder.com/400x300" media="(max-width: 500px)" />
        <source data-srcset="http://via.placeholder.com/800x600" />
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
            data-src="http://via.placeholder.com/200x200"
            class=""
            alt="" />
    </picture>
     

    Parameters

    (src, srcset, sizes, callback, loadOnScroll, resizeDebounce, throttle, threshold)

    parameter description
    src Type: string
    Default: 'data-src'

    The data attribute we want to use for the images src attribute.
    srcset Type: string
    Default: 'data-srcset'

    The data attribute we want to use for the images srcset attribute.
    sizes Type: string
    Default: 'data-sizes'

    The data attribute we want to use for the images sizes attribute.
    callback Type: function
    Default: undefined

    An optional function that will be called after each image has been loaded.
    loadOnScroll Type: Boolean
    Default: true

    Do you want to load the images when they are in the viewport or all once?
    resizeDebounce Type: INT
    Default: 500

    How long after the user stops resizing their browser window before firing the resize recalculations.
    throttle Type: INT
    Default: 250

    How often the scroll event listener fires to check if the image is in view.
    threshold Type: INT
    Default: 0

    How much of an offset do you want for the image to be classed as in the viewport?

    MIT

    Install

    npm i responsive-lazy-loader

    DownloadsWeekly Downloads

    0

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    36.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • chrisboakes
    • milad-alizadeh