Web Font Loader 활성/비활성 콜백의 올바른 사용

-1

나는 꽤 분명한 질문이 무엇인지에 문제가 있습니다.Web Font Loader 활성/비활성 콜백의 올바른 사용

Webfont Loader 설명서는 "HTML 문서의 <head>에있는 첫 번째 요소"라고 설명합니다. 또한 글꼴이로드 될 때 또는로드/시간 초과에 실패 할 때 호출되는 활성/비활성 콜백 옵션을 포함합니다.

문제는, 콜백 함수가 그 직후에 스크립트 블록에 배치되면 콜백 함수가 정의되지 않는다는 것입니다. 다음과 같이

내 코드는 다음과 같습니다

<head> 
    <script type="text/javascript"> 
    WebFontConfig = { 
     google: { families: [ 'Playball::latin' ] }, 
     active: doActive(), 
     inactive: doInactive() 
    }; 
    (function() { 
     var wf = document.createElement('script'); 
     wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 
     '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
     wf.type = 'text/javascript'; 
     wf.async = 'true'; 
     var s = document.getElementsByTagName('script')[0]; 
     s.parentNode.insertBefore(wf, s); 
    })(); </script> 

    // ... other code ... 

    <script> 
    function doActive() { 
     // ... 
    } 
    function doInactive() { 
     // ... 
    } 
    </script> 
</head>

단지 기본 구글 코드의

, 플러스 두 콜백.

다른 옵션을 정의한 후에 webfont loader를 포함하는 것이 명백한 옵션이지만 우아한 것은 아닙니다. 나는 더 나은 해결책이 있다는 것을 알고 있지만, 나의 Google-fu는 그것을 찾지 못하고있다.

출처

2013-11-27 Tim

귀하의 잘못은 콜백을 직접 실행하는 것이 었습니다. 대신이의

WebFontConfig = { 
    google: { families: [ 'Playball::latin' ] }, 
    active: doActive(), //() executes directly 
    inactive: doInactive() 
};

그 시도해야 당신의 : 라이브러리가 당신의 콜백을 실행하면

WebFontConfig = { 
    google: { families: [ 'Playball::latin' ] }, 
    active: doActive, // Only the function. The library will execute the function 
    inactive: doInactive 
};

을, 함수,이 정답 사용할 수

출처

2018-02-07 16:28:33

감사하다해야, 완전히 방법을 이해하지 않았다 그것은 일하기로되어있었습니다. – Tim

다른 사람이 대답을 찾고 있다면, 이것은 가장 우아한 (또는 올바른) 방법은 아니지만 나는 가능합니다.

<script> 
    var fontsLoaded = false; 
    WebFontConfig = { 
     google: { families: [ 'Playball::latin' ] }, 
     active: function() { fontsLoaded = true }, 
     inactive: function() { fontsLoaded = -1 } 
    }; 
    (function() { 
     var wf = document.createElement('script'); 
     wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
     wf.type = 'text/javascript'; 
     wf.async = 'true'; 
     var s = document.getElementsByTagName('script')[0]; 
     s.parentNode.insertBefore(wf, s); 
     })(); </script> 

// ... other stuff ... 

    <script> 
    var MAX_WAIT = 15000; var startTime = Date.now(); var tx; 
    checkLoaded(); 
    function checkLoaded() { 
     clearTimeout(tx); 
     if (fontsLoaded === -1) { doInactive(); } 
     else if (fontsLoaded) { doActive(); } 
     else { 
     if (Date.now()-startTime > MAX_WAIT) { doInactive(); } 
     else { tx = setTimeout(checkLoaded,100); } 
     } 
    } 
    </script>

출처

2013-12-11 18:33:02 Tim

Web Font Loader 활성/비활성 콜백의 올바른 사용

답변

관련 문제