CSS 파일이 로드되었는지 판단하는 Js의 구체적인 구현_javascript 기술

CSS 파일이 로드되었는지 확인하기 위해 각 브라우저의 방법이 상당히 다릅니다. 이번에는 CSS가 로드된 후 onload 방법을 직접 사용하여 처리할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

// seajs에서 발췌한 코드
function styleOnload (node, callback ) {
// IE6-9 및 Opera용
if (node.attachEvent) {
node.attachEvent('onload', callback);
// 참고:
// 1 . "onload"는 파일이 404일 때 IE6-9에서 실행되지만
// 이 상황에서는 Opera는 아무것도 하지 않으므로 시간 초과로 대체됩니다.
// 2. "onerror" 어떤 브라우저에서도 실행되지 않습니다!
}
}

안타깝게도 이번에 다른 브라우저에서는 CSS가 로드되었는지 판단하는 것이 그리 편리하지 않습니다. FF와 웹킷은 node.sheet.cssRules 속성이 존재하는지 여부로 CSS가 로드되었는지 판단할 수 있습니다. 그리고 setTimeout 간격 이벤트 폴링을 사용해야 합니다.

코드 복사 코드는 다음과 같습니다.

// seajs 코드 발췌
function poll(node, callback) {
if (callback.isCalled) {
return;
}
var isLoaded = false;
if ( /webkit/i .test(navigator.userAgent)) {//webkit
if (node['sheet']) {
isLoaded = true;
}
}
// for Firefox
else if (node['sheet']) {
try {
{> // ns_error_dom_security_err
if (ex.code === 1000) {
isloaded = true ;
}
🎜>}
{ // 렌더링할 시간을 줍니다.
setTimeout(function() {
callback();
}, 1);
}
else {
setTimeout(function() {
poll(노드, 콜백);
}, 1);
}
}

setTimeout(function() {
poll(노드, 콜백);
}, 0)



SeaJS에서 제공하는 전체 처리는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

function styleOnload(node, callback) {
    // IE6-9 및 Opera용
    if (node.attachEvent) {
      node.attachEvent('onload', callback);
      // 주의사항:
      // 1. 파일이 404일 때 IE6-9에서는 "onload"가 실행되지만
      // 이 상황에서는 Opera는 아무 작업도 수행하지 않으므로 시간 초과로 대체됩니다.
      // 2. "onerror"는 어떤 브라우저에서도 실행되지 않습니다!
    }
    // Firefox, Chrome, Safari에 대한 폴링
    else {
      setTimeout(function() {
        poll (노드, 콜백);
      }, 0); // 캐시용
    }
  }
  function poll(node, callback) {
    if (callback.isCalled) {
      return;
    }
    var isLoaded = false;
    if (/webkit/i.test(navigator.userAgent)) {//webkit
      if (node['sheet']) {
        isLoaded = true;
      }
    }
    // Firefox용
    else if (node['sheet']) {
      시도 {
        if (node['sheet'].cssRules) {
          isLoaded = true;
}
      } catch(예) {
        // NS_ERROR_DOM_SECURITY_ERR
        if (ex.code === 1000) {
          isLoaded = true;
        }
      }
    }
    if (isLoaded) {
      // 렌더링 시간을 줍니다.
      setTimeout(function() {
        callback();
      }, 1);
    }
    else {
      setTimeout(function() {
        poll(노드, 콜백);
      }, 1);
    }
  }
// 我的动态创建LINK函数
함수 createLink(cssURL,lnkId,charset,media){
    var head = document.getElementsByTagName('head')[0],
        linkTag = null;

 if(!cssURL){
     false 반환;
 }

    linkTag = document.createElement('link');
 linkTag.setAttribute('id',(lnkId || 'dynamic-style'));
 linkTag.setAttribute('rel','stylesheet');
 linkTag.setAttribute('charset',(charset || 'utf-8'));
linkTag.setAttribute('media',(media||'all'));
 linkTag.setAttribute('type','text/css');
    linkTag.href = cssURL;

    head.appendChild(linkTag);
}
함수 loadcss(){
    var styleNode = createLink('/wp-content/themes/BlueNight/style.css');

    styleOnload(styleNode,function(){
        경고("로드됨");
    });
}

지금 看到seajs的代码的时候,我立刻想起了我看到Diego Perini의另一个解决方案：

复主代码 代码如下:

/*
 * Copyright (C) 2010 Diego Perini
 * 모든 권리 보유.
 *
 * cssready.js - CSS 로드/준비 상태 알림
 *
 * 작성자: Diego Perini
 * 버전: 0.1
 * 생성: 20100616
 * 출시: 20101104
 *
 * 라이선스:
*  http://www.jb51.net * 다운로드:
 *  http://javascript.nwbox.com/cssready/cssready.js
 */
function cssReady(fn, link) {
  var d = 문서,
  t = d.createStyleSheet,
  r = t ? '규칙': 'cssRules',
  s = t ? 'styleSheet' : 'sheet',
  l = d.getElementsByTagName('link');
  // ​​전달된 링크 또는 마지막 링크 노드
  link || (link = l[l.length - 1]);
  function check() {
    try {
      링크 반환 && 링크[s] && 링크[s][r] && 링크[s][ r][0];
    } catch(e) {
      return false;
    }
  }
  (function poll() {
    check() && setTimeout(fn, 0 ) || setTimeout(poll, 100);
  })();
}

JQuery는 domready事件的判断的代码，원리 학적입니다.毕。
还有，Fackbook则是通过재动态创建的CSS样式中包含一个固 정한 样式，例如#loadcssdom，loadcssdom就是一个高島为1px样式。然后动态创建一个DOM对象，添加这个loadcssdom样式。然后也是setTimeout轮询loadcssdo是否已经有1px적고도了。这个处理How is a How is a How is a 스타일시트가 정말 로드되었나요?》是一个抛砖引玉，因为开发中，除了动态加载CSS，我们还要动态加载JavaScript，动态加载HTML적操작，유공我也会写关于动态加载JavaScript的关内容，不过在那之前，我建议你看看这些：
    《보장 – JavaScript/HTML/CSS 보장 필요할 때 온디맨드 방식으로 로드됩니다》,这个库是专门处理动态加载HTML,CSS,JavaScriptative.就image작품작자介绍的那样：
        로드할 수 있는 편리한 기능을 제공하는 작은 JavaScript 라이브러리입니다. 요청에 따라 JavaScript, HTML, CSS를 선택한 다음 코드를 실행하세요. www.jb51.net에서 관련 JavaScript 및 HTML 스니펫을 사용하는 코드를 실행하기 전에 관련 JavaScript 및 HTML 스니펫이 이미 브라우저 DOM에 있는지 확인하세요.
    《CSS에 JavaScript를 최대한 빨리 사용할 수 있다고 알리기》
    看完这个后，你可能就不会纠结：JavaScript의 사용 가능 여부에 따라 다르게 보이고 작동하는 웹 페이지 부분의 스타일을 지정할 때.
好了，这次就说这么多了，希望对对大家的开发화학이 있습니다!