【前端新手之路-第2天】按需加载的含义及如何用js实现

按需加载：由于用户触发了一些动作，而加载相应的资源。这些动作可以是单击（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标签