Execute Functions After A Period Of Time - jQuery lazyLoad.js

File Size: 4.01 KB
Views Total: 592
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Execute Functions After A Period Of Time - jQuery lazyLoad.js

lazyLoad.js is a jQuery plugin to execute your scripts when specific elements are scrolled into view and stay on the screen for a period of time.

How to use it:

1. Link to jQuery library and the lazyLoad.js script as follows:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="lazyLoad.js"></script>

2. Initialize the plugin on the target element.

$( window ).scroll(function() {
  $('.element').lazyLoad();
});

3. Re-initialize the plugin on window resize.

$( window ).resize(function() {
  $('.element').lazyLoad();
});

4. Perform an action when users are looking at your element.

$( window ).scroll(function() {
  $('.element').lazyLoad({
    loadingCB: function(){
      // do something
    }
  });
});

5. Perform an action when users look at your element for $timeout period of time.

$( window ).scroll(function() {
  $('.element').lazyLoad({
    timeout: 2000,
    loadedCB: function(){
      // do something
    }
  });
});

6. Perform an action when users leave your element.

$( window ).scroll(function() {
  $('.element').lazyLoad({
    skippedCB: function(){
      // do something
    }
  });
});

This awesome jQuery plugin is developed by warpgt. For more Advanced Usages, please check the demo page or visit the official website.