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 |
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.