【前端新手之路-第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標籤