怎么实现多个css，js文件的延时加载

html-css016

怎么实现多个css，js文件的延时加载,第1张

1、把js的代码放在body里面，最好是放在页面最后的位置，而不是放在head里面。这样整个页面加载结束的时候才会加载到js。

2、你可以使用js函数动态的修改页面，加载js。下面附上两个函数，可以用来加载js或者css。

/*Title : 包含其它 js 文件。

* Description : 将其它 Js 文件引入本文件中，方便管理、维护。*/

function include_js(path) {

var sobj = document.createElement('script')

sobj.type = "text/javascript"

sobj.src = path

var headobj = document.getElementsByTagName('head')[0]

headobj.appendChild(sobj)

}

/* Title : 包含其它 css 文件。

* Description : 将其它 css 文件引入本文件中，方便管理、维护。 */

function include_css(path) {

var fileref = document.createElement("link")

fileref.rel = "stylesheet"

fileref.type = "text/css"

fileref.href = path

}

3、利用ajax加载js。

.class{

    opacity:0

}

.class:hover{

    animation:ttt 3s 1 forwards /*这里的3s表示总动画长3秒，其它属性感兴趣自己去查，反正主要就是那个3s*/

}

@keyframes ttt {

    0%{

        opacity:0

    }

    66%{ /*这里表示3s的66%也就是大约2秒的时候*/

        opacity:0

    }

    100%{

        opacity:1

    }

}

最终就会前2秒没变化，然后才开始执行了