按需加载:由于用户触发了一些动作,而加载相应的资源。这些动作可以是单击(onclick),滚动滚动条(onscroll),改变窗口大小(onresize),输入文字(可自行了解以下区别:onchange,oninput,onkeyup)等等,加载的资源可以是图片,html,css,js等等
按需加载图片:
<img id="first" src="#" alt="狗狗" title="狗狗" data-src="../picture/1.jpg">
<script>
var imgEle=document.getElementById("first");
var src=imgEle.dataset.src;
var imgLoad=function
(src) {//这个函数放到触发的事件中
imgEle.src=src;
}
</script>
按需加载html:
将要加载的元素放到textarea中
<textarea
id="box">
<p>
<a>呜呜啦啦说好多</a>
</p>
</textarea>
var box=document.getElementById("box");
box.parentNode.innerHTML=box.value;
按需加载js(css):
function scriptLoad(src) {
var script=document.createElement("script");
script.src=src;
document.head.appendChild(script);
}
加载css只需要创建link标签