how to lazyload anything

Question

I know able to lazy load 'image' using some third party jquery library. Is there anyway to lazy load just about anything like <div> element container for example when user scroll to that <div> container

Answer 1

To expand on kinsho's (correct) answer:

For security and maintainability reasons, you should be wary of injecting raw HTML directly into documents. Doing so can break event listeners, break the DOM parser, and potentially open up security vulnerabilities.

Usually, the best way to lazy load stuff is to send encoded data (such as JSON or XML) to the client, and process the result accordingly. For basic HTML, a templating solution could be used. Even an iframe can be better than pasting <div><h1>Hello</h1><table><tbody><td><tr>1</td></tr><tr><td>2</td></tr></tbody></table></div>* into an element's innerHTML.

Also, before you implement lazy loading for your site, take some time to consider if it's really worth it. An additional HTTP request is noticeably more expensive than just downloading data all at once, and any HTML injected via Javascript will not be seen by web search crawlers. So, if you're only injecting a small amount of static information, it really isn't worth the trouble.

---

*can you find the parse error? Now imagine doing that for a standard-sized HTML document.

Answer 2

Why rely on some third-party library to help you lazy-load? You can do just fine using native JavaScript.

In fact, as long as you accept the principle that all lazy-loading is triggered by some user action, set up a listener on a specific object (be it the scroll bar, some section header, etc). Set up a corresponding handler that relies on AJAX (you can use jQuery here) to fetch data (preferably HTML) that you can load directly into whatever container you want using the innerHTML property of the container element.