javascript 如何延迟加载任何东西
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14407964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to lazyload anything
提问by cometta
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
我知道能够使用某些第三方 jquery 库延迟加载“图像”。无论如何，<div>当用户滚动到该<div>容器时，是否可以延迟加载元素容器之类的东西
采纳答案by Jeffrey Sweeney
To expand on kinsho's (correct) answer:
扩展kinsho的（正确）答案：
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.
出于安全性和可维护性的原因，您应该警惕将原始 HTML 直接注入到文档中。这样做会破坏事件侦听器、破坏 DOM 解析器，并可能打开安全漏洞。
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 iframecan 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.
通常，延迟加载内容的最佳方法是将编码数据（例如 JSON 或 XML）发送到客户端，并相应地处理结果。对于基本的 HTML，可以使用模板解决方案。甚至 aniframe也比将<div><h1>Hello</h1><table><tbody><td><tr>1</td></tr><tr><td>2</td></tr></tbody></table></div>*粘贴到元素的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.
此外，在为您的网站实施延迟加载之前，请花一些时间考虑它是否真的值得。额外的 HTTP 请求明显比一次下载所有数据更昂贵，并且任何通过 Javascript 注入的 HTML 都不会被网络搜索爬虫看到。所以，如果你只是注入少量的静态信息，那真的不值得麻烦。
*can you find the parse error? Now imagine doing that for a standard-sized HTML document.
*你能找到解析错误吗？现在想象一下对标准大小的 HTML 文档执行此操作。
回答by kinsho
Why rely on some third-party library to help you lazy-load? You can do just fine using native JavaScript.
为什么要依赖一些第三方库来帮助你延迟加载？您可以使用原生 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 innerHTMLproperty of the container element.
实际上，只要您接受所有延迟加载都是由某些用户操作触发的原则，就可以在特定对象（滚动条、某些部分标题等）上设置侦听器。设置依赖于 AJAX（您可以在此处使用 jQuery）的相应处理程序来获取数据（最好是 HTML），您可以使用innerHTML容器元素的属性将这些数据直接加载到您想要的任何容器中。
回答by shrimpwagon
Here is what you really wanted to begin with. It is a new jQuery plugin that I made myself. You can "Lazy Load" anything you want based on any element (jQuery selector) you wish.
这是你真正想要开始的。这是我自己制作的一个新的 jQuery 插件。您可以根据您希望的任何元素（jQuery 选择器）“延迟加载”您想要的任何内容。
