> 웹 프론트엔드 > JS 튜토리얼 > js 라이브러리를 제거하고 CSS 메서드를 동적으로 로드하여 코드를 구현하는 방법에 대한 자세한 설명

js 라이브러리를 제거하고 CSS 메서드를 동적으로 로드하여 코드를 구현하는 방법에 대한 자세한 설명

伊谢尔伦
풀어 주다: 2017-07-21 09:35:10
원래의
1243명이 탐색했습니다.

一、参数

本方法支持三个参数,可进行扩展。

1.1 opations.url

url是需要引入的css资源路径,也即标签的href属性内容。

1.2 options.id

id是标签的id属性。这个参数为非必要参数,可不传。主要作用是标记当前标签,方便js进行查找,以确定是否已加载某个css文件。

1.3 options.callback

callback是css文件加载完成后会调用的回调函数。也存在特殊场景下,文件加载失败,回调函数仍旧执行的情况。

二、生成标签,并插入头部head,进行加载资源


var url = options.url,
 callback = typeof options.callback == "function" ? options.callback : function(){},
 id = options.id,
 node = document.createElement("link");
node.rel = "stylesheet";
node.type = "text/css";
node.href = url;
if( typeof id !== "undefined" ){
 node.id = id;
}
document.getElementsByTagName("head")[0].appendChild(node);
로그인 후 복사

生成一个dom节点,然后配置好rel、type、href等必需的属性值,以便浏览器能正常解析链接的资源。

接着,查找到head节点,将节点插入。

三、实现css资源下载状态监控的pollCss方法

pollCss方法的职责是判断插入的link节点,也即node变量反馈资源是否已加载完成。

3.1 判断的主要依据

浏览器加载css资源,会给该link节点生成sheet属性,可以根据浏览器不同,读取sheet属性相关内容,来判断是否已经加载完成。所以第一句语句var sheet = node.sheet首先要做的就是获取sheet属性值。

3.2 普通浏览器判断


try{
 if(sheet.cssRules){
 isLoaded = true;
 }
}catch(ex){
 // 火狐特殊版本,通过特定值获知是否下载成功
 // The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"
 // to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0
 // in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"
 if(ex.name === "NS_ERROR_DOM_SECURITY_ERR"){
 isLoaded = true;
 }
}
로그인 후 복사

如果读取sheet.cssRules有值,证明css资源已经链接进页面,并开始解析。此时可以判断资源加载成功。

如果读取失败,则根据抛错内容,判断是否有特定name属性ex.name === "NS_ERROR_DOM_SECURITY_ERR"。存在,则代表是低版本火狐(9.0以前),且资源已经加载成功。

3.3 旧webkit内核浏览器判断


var isOldWebKit = +navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, "$1") < 536; // webkit旧内核做特殊处理
if(isOldWebKit){
 // for WebKit < 536
 if(sheet){
 isLoaded = true;
 }
}
로그인 후 복사

如果是webkit旧内核浏览器,则只需要判断sheet属性值存在,则代表资源加载完成。

3.4 增加多次循环检测


setTimeout(function() {
 if(isLoaded){
 // 延迟20ms是为了给下载的样式留够渲染的时间
 callback();
 }else{
 pollCss(node, callback, step);
 }
}, 20);
로그인 후 복사

触发pollCss方法后,可能第一次检测sheet值,会检测不到。也就代表还没加载完成。所以需要进行轮询。这里是隔20ms进行一次问询,直到资源加载完成为止。

3.5 轮询容错(针对Sea.js源码的优化)

css资源加载也有可能出错的时机存在,而且存在不触发onerror方法的可能性。如果不加一个保护,则轮询可能一直持续下去,所以需要有一个极限阈值。


var protectNum = 300000, // 阈值10分钟,一秒钟执行pollCss 500次
 step = 0;
// 很多代码....
step += 1;
// 保护,大于10分钟,则不再轮询
if(step > protectNum){
 isLoaded = true;
 // 清空node引用
 node = null;
 callback();
 return;
}
로그인 후 복사

这里的阈值是轮询10分钟,如果10分钟后,仍然不符合条件,则默认资源已下载完成,执行callback方法,并清空node引用。

四、确定触发pollCss检查的时机

4.1 pollCss轮询的应用场景

当浏览器内核是旧的webkit内核时,或者不支持节点触发onload方法时,才使用pollCss进行轮询。


// for Old WebKit and Old Firefox
if (isOldWebKit || !supportOnload) {
 // Begin after node insertion
 setTimeout(function() {
 pollCss(node, callback, 0);
 }, 1);
 return;
}
로그인 후 복사

五、现代浏览器直接用onload和onreadystatechange做判断

现代浏览器用这种方式判断,可以避免轮询的弊端。判断也更加准确及时。

5.1 onload方法


function onload() {
 // 确保只跑一次下载操作
 node.onload = node.onerror = node.onreadystatechange = null;
 // 清空node引用,在低版本IE,不清除会造成内存泄露
 node = null;
 callback();
}
로그인 후 복사

onload方法触发执行后,应立即将多个相关方法进行重置,以避免callback多次触发。

node = null;将node重置为null,是为了避免低版本的IE出现内存溢出问题,及时清除没用的dom节点。

最后,执行callback方法。

5.2 支持onload方法浏览器的处理


if(supportOnload){
 node.onload = onload;
 node.onerror = function() {
 // 加载失败(404)
 onload();
 }
}
로그인 후 복사

5.3 不支持onload方法浏览器的处理


if(supportOnload){
 // 代码...
}else{
 node.onreadystatechange = function() {
 if (/loaded|complete/.test(node.readyState)) {
  onload();
 }
 }
}
로그인 후 복사

위 내용은 js 라이브러리를 제거하고 CSS 메서드를 동적으로 로드하여 코드를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿