按需加载实现方法
按需解析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="点我展示HTML" onclick="showHTML()" />
<script>
function showHTML(){
document.getElementById('success_dilog').innerHTML = document.getElementById('suc_subscription').innerHTML;
}
</script>
</body>
</html>
按需加载图片
<img width="158" height="158" data-src="http://img2.114msn.com/jindian/20081071153761308.jpg" />
使用“按需加载”进行性能优化时，需要合理选择触发的动作。“按需加载”的最大优势在于减少了不必要的资源请求，节省流量，真正实现“按需所取”。但是“按需加载”本身如果使用不当也会影响用户体验，因为“按需加载”的时机在用户触发某动作之后，如果用户的网速比较慢的话，加载脚本或执行脚本可能需要等候较长的时间，而用户则不得不为此付出代价。因此，如果要使用“按需加载”则需要选择正确的触发动作，如果是根据滚动条来触发，可考虑一个目标距离，假设目标距离还有200像素即将进入可视区域，则就开始加载，而不是等到进入了可视区域才加载。以上所讲的各种“按需加载”类型，都可以封装成相应的组件，然后就可以在项目中进行应用。
http://tid.tenpay.com/?p=4085
浙公网安备 33010602011771号