Any Content Lazy Load Plugin With jQuery - lazyload-any
File Size: | 871 KB |
---|---|
Views Total: | 8664 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
lazyload-any is a jQuery based lazy loader which has the ability to delay the loading of any html contents (for example images, iframes, overflow contents) until they come into view (or when a custom event is triggered).
Basic usage:
1. Include the jQuery lazyload-any plugin's script after jQuery JavaScript library.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="jquery.lazyload-any.js"></script>
2. The plugin currently provides 3 method to insert the contents you want to lazy load:
<!-- Using Data Attribute --> <div id="el" data-lazyload="Anything you want to lazyload"> </div> <!-- Using JavaScript --> <div id="el"> <script type="text/lazyload"> <span>Anything you want to lazyload</span> </script> </div> <div id="el"> <!-- <span>Anything you want to lazyload</span> --> </div>
3. Call the function and done.
$('#el').lazyload();
4. Set the threshold
in pixels that control the trigger point for lazy loading.
$('#el').lazyload({ threshold: 100 });
5. Override the default trigger event.
$('#el').lazyload({ trigger: "appear" // or "click", "mousedown touchstart", etc });
6. Execute a callback function when the content is loading.
$('#el').lazyload({ load: function(){} });
7. API methods.
// trigger the detection event $('#el').lazyload.check() // set the interval $('#el').lazyload.setInterval(inverval) // refresh the status $('#el').lazyload.refresh(selector)
This awesome jQuery plugin is developed by emn178. For more Advanced Usages, please check the demo page or visit the official website.