如何懒惰加载任何东西

时间:2013-01-18 21:30:44

标签: javascript jquery html

我知道可以使用某些第三方jquery库来延迟加载'image'。是否有任何类似于<div>元素容器的延迟加载,例如当用户滚动到该<div>容器

3 个答案:

答案 0 :(得分:5)

扩展kinsho的(正确的)答案:

出于安全性和可维护性的原因,您应该警惕将原始HTML直接注入文档。这样做可能会破坏事件侦听器,破坏DOM解析器,并可能打开安全漏洞。

通常,延迟加载的最佳方法是将编码数据(如JSON或XML)发送到客户端,并相应地处理结果。对于基本HTML,可以使用templating solution。即使iframe比将<div><h1>Hello</h1><table><tbody><td><tr>1</td></tr><tr><td>2</td></tr></tbody></table></div> *粘贴到元素的innerHTML中也要好。

此外,在为您的网站实施延迟加载之前,请花一些时间考虑它是否真的值得。额外的HTTP请求明显比仅一次下载数据更昂贵,并且Web搜索爬虫不会看到通过Javascript注入的任何HTML。所以,如果你只注入少量静态信息,那真的不值得这么麻烦。


*你能找到解析错误吗?现在想象一下,为标准大小的HTML文档做这件事。

答案 1 :(得分:2)

为什么要依赖某些第三方库来帮助您进行延迟加载?你可以使用原生JavaScript做得很好。

实际上,只要您接受所有延迟加载由某些用户操作触发的原则,请在特定对象(无论是滚动条,某些节标题等)上设置侦听器。设置一个依赖于AJAX的相应处理程序(你可以在这里使用jQuery)来获取数据(最好是HTML),你可以使用容器元素的innerHTML属性直接加载到你想要的任何容器中。

答案 2 :(得分:0)

这是你真正想要开始的。这是我自己创建的一个新的jQuery插件。你可以根据你想要的任何元素(jQuery选择器)“懒惰加载”任何你想要的东西。

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