首页 > 代码库 > 按需加载/懒加载
按需加载/懒加载
按需解析HTML
按需解析HTML，就是页面一开始不解析HTML，根据需要来解析HTML。解析HTML都是需要一定时间，特别是HTML中包含有img标签、引用了背景图片时，如果一开始就解析，那么势必会增加请求数。常见的有对话框、拉菜单、多标签的内容展示等，这些一开始是不需要解析，可以按需解析。
实现按需解析，首先用<script type=”text/x-template”>html</sccript> 这个标签来对忽略对HTML的解析。然后根据触发的动作，把script里面的HTML获取出来，填充到对应的节点中。
示例代码如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>按需解析HTML</title></head><body><script type="text/x-template" id="suc_subscription"> <!--假设这里的样式box-dytz 引用了一张背景图---> <div> <!--这里暂且用这张图片作为测试，实际中，大家可以替换为任何图片--> <img src="http://tid.tenpay.com/wp-content/uploads/2012/12/按需加载.jpg" /> </div></script><div id="success_dilog"></div><input type="button" value="http://www.mamicode.com/点我展示HTML" onclick="showHTML()" /><script> function showHTML(){ document.getElementById(‘success_dilog‘).innerHTML = document.getElementById(‘suc_subscription‘).innerHTML; }</script></body></html>DEMO：http://tid.tenpay.com/wp-content/uploads/2013/06/demo.html
在页面加载结束后，看到并没有图片加载的请求。
点击按钮之后执行了加载图片的操作，此时才在网络中看到图片的请求
这样减少了加载页面最开始的请求，减轻服务器的负载。
按需加载图片
按需加载图片，就是让图片默认开始不加载，而且在接近可视区域范围时，再进行加载。也称之为懒惰加载。大家都知道，图片一下子全部都加载，请求的次数将会增加，势必影响性能。
先来看下懒惰加载的实现原理。它的触发动作是：当滚动条拉动到某个位置时，即将进入可视范围的图片需要加载。实现的过程分为下面几个步骤：
1）生成<img data-src=http://www.mamicode.com/”url”>标签时，用data-src来保存图片地址；
（相当于加载转圈的图片）
2）记录的图片data-src都保存到数组里；
（保存真正的图片）
3）对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};
4）在函数lazyload中，按照下面思路实现：计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+ scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的按需加载；