CSS , javascript 에서 로딩 지연이 발생할때 처리방법
css or javascirpt 에서 외부 URL 로 관련 자료를 불러올때, 지연이 발생하는 경우가 있다.
google or bootstrapcdn 등등..
우선 부트스트랩의 경우
원래 아래와 같이 head 안에 들어가게 되는데..
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"/>
....
처리 방법은 아래와 같다.
<!--
How to load Font Awesome asynchronously
Use: Just put this script on the bottom/footer of your web
-->
<script type="text/javascript">
(function() {
var css = document.createElement('link');
css.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
css.rel = 'stylesheet';
css.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(css);
})();
</script>
구글 자바스크립트의 경우 async defer 을 넣어주면 된다.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async defer src="https://www.googletagmanager.com/gtag/js?id=UA-1-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-1-1');
</script>
추가 사항
아래와 같이 적용이 가능합니다.
<!--
How to load Font Awesome asynchronously
Use: Just put this script on the bottom/footer of your web
-->
<script type="text/javascript">
(function() {
var css = document.createElement('link');
css.href = 'App_Themes/inspinia/style.css';
css.rel = 'stylesheet';
css.type = 'text/css';
document.head.insertBefore(css, document.head.childNodes[document.head.childNodes.length - 1].nextSibling);
var css1 = document.createElement('link');
css1.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
css1.rel = 'stylesheet';
css1.type = 'text/css';
document.head.insertBefore(css1, document.head.childNodes[document.head.childNodes.length - 1].nextSibling);
})();
</script>
'프로그램&코딩' 카테고리의 다른 글
| c#엑셀(Excel) 숫자형식 텍스트로 처리 (0) | 2018.11.15 |
|---|---|
| 웹 캐시로 UI 및 css 및 js 파일이 적용이 되지 않을때. (0) | 2018.08.09 |
| System.Web.Mvc.Controller.HandleUnknownAction(String actionName) 발생하는 경우.. (0) | 2018.07.17 |
| IIS 7.0 "HTTP 오류 404.0-찾을 수 없습니다" 오류 (0) | 2017.08.23 |
| iBatis - XML 쿼리 Where 조건에 In 사용법.. (1) | 2017.02.14 |
| SOAP 웹서비스 외부에서 테스트 할 경우. (0) | 2011.07.20 |
