Like lazyload anything

Question

I know that I can load an "image" using some third-party jquery library. Is there actually a lazy load on something like a container of <div> elements, for example, when a user views this container <div>

Answer 1

To expand the kinsho (correct) answer:

For security and maintenance reasons, you should carefully embed raw HTML directly into documents. This can disrupt event listeners, break the DOM parser, and potentially expose security vulnerabilities.

Usually, the best way to load lazily is to send encoded data (such as JSON or XML) to the client and process the result accordingly. For basic HTML, you can use a template solution. Even iframe can be better than inserting <div><h1>Hello</h1><table><tbody><td><tr>1</td></tr><tr><td>2</td></tr></tbody></table></div> * into the innerHTML element.

Also, before you start lazy loading for your site, consider whether it's really worth it. An additional HTTP request is noticeably more expensive than just downloading the data right away, and any HTML code entered through Javascript will not be visible to web search crawlers. So if you enter only a small amount of static information, this is really not worth the trouble.

---

* Can you find the parsing error? Now imagine that you are doing this for a standard size HTML document.

Answer 2

Why rely on some third-party library to help you boot lazily? You can just perfectly use your own JavaScript.

In fact, as long as you agree with the principle that all lazy loading is initiated by some kind of user action, set the listener to a specific object (whether it is a scroll bar, some section title, etc.). Set up an appropriate handler that relies on AJAX (you can use jQuery here) to retrieve data (preferably HTML) that can be loaded directly into any container you want using the container's innerHTML property.

Answer 3

Here is what you really wanted to start. This is a new jQuery plugin that I made myself. You can "Lazy Load" whatever you want based on any element (jQuery selector) that you want.

https://github.com/shrimpwagon/jquery-lazyloadanything