Example: Throttle Demonstration

Throttle is a way to limit calls on a function by time. If enabled, Lazy will take care of the amount of calls on the image load function. By default Lazy will execute the loading by a maximum of every 250 milliseconds. You can change that behavior with the enableThrottle and throttle parameters.

Please scroll through the page or resize the window to count the events with and without throttle. See the difference below.

 

with:

0

without:

0

saving:

0%

 


    <img class="lazy" data-src="images/1.jpg" />
    <img class="lazy" data-src="images/2.jpg" />
    <img class="lazy" data-src="images/3.jpg" />
    <img class="lazy" data-src="images/4.jpg" />
    <img class="lazy" data-src="images/5.jpg" />
    <img class="lazy" data-src="images/6.jpg" />
    <img class="lazy" data-src="images/7.jpg" />
    <img class="lazy" data-src="images/8.jpg" />
    <img class="lazy" data-src="images/9.jpg" />
    <img class="lazy" data-src="images/0.jpg" />
                  

    img.lazy {
        width: 700px; 
        height: 467px; 
        display: block;
    }
                  

    // with throttle
    $(function() {
        $('.lazy').lazy({
            enableThrottle: true,
            throttle: 250
        });
    });

    // without throttle
    $(function() {
        $('.lazy').lazy({
            enableThrottle: false,
        });
    });

 

Note: All examples verbose their actions to the sidebar on the left and even to your browsers console by console.log. Check the output there (hit F12 key to open your browsers dev tools).

Demonstration