Any Content Lazy Load Plugin With jQuery - lazyload-any

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.