Adding lazy loading for <div> element

Question

Instead of lazy loading image alone,i need to add lazy load for entire div element in my page.

Can you anyone help me out with some plugins or own js code.

Answer 1

You can use this plugin. Its helpful and will do the trick for you.

https://github.com/emn178/jquery-lazyload-any

Just use this script as shown in documentation.

<div id="you-want-lazyload">
  <!--
    <p>Anything you want to lazyload</p>
  -->
</div>

JavaScript

$('#you-want-lazyload').lazyload(options);

Hope it will help.

Edit

HTML Attribute Style

<div id="you-want-lazyload" data-lazyload="&lt;p&gt;Anything you want to lazyload&lt;/p&gt;">
</div>

Script Style

<div id="you-want-lazyload">
  <script type="text/lazyload">
    <p>Anything you want to lazyload</p>
  </script>
</div>