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

html-css010

怎么实现多个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。

https://codepen.io/alphardex/pen/XWWWBmQ

通过animation-delay来控制相同的元素（div）不同延时显示动画

https://codepen.io/alphardex/pen/KKwvKGY

用JS将句子或单词分割成字母，并给每个字母加上不同延时的动画。

https://codepen.io/alphardex/pen/eYYMYXJ

如果要从中间元素开始交错的话，就要给当前元素的延时各加上一个值，这个值就是中间元素的下标到当前元素的下标的距离（也就是下标之差的绝对值）与步长的乘积，即：delay + Math.abs(i - middle) * step，其中中间元素的下标middle = letters.filter(e =>e !== "").length / 2

https://codepen.io/alphardex/pen/dyPorwJ