jQuery의 로딩을 연기할 수 있습니까?
현실을 직시하자, jQuery/j쿼리-ui는 다운로드가 많습니다.
구글은 초기 렌더링 속도를 높이기 위해 자바스크립트 로딩을 연기할 것을 권장합니다.내 페이지는 jQuery를 사용하여 페이지에 낮게 배치된 탭을 설정합니다(대부분 초기 보기를 벗어남). 페이지가 렌더링된 후까지 jQuery를 연기하고 싶습니다.
Google의 연기 코드는 Body onLoad 이벤트를 후킹하여 페이지가 로드된 후 DOM에 태그를 추가합니다.
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
이런 식으로 jQuery를 로드하는 것을 미루고 싶지만 시도해보니 jQuery 코드가 jQuery를 찾지 못했습니다(제 입장에서는 전혀 예상치 못한 것은 아닙니다).
$(document).ready(function() {
$("#tabs").tabs();
});
그래서 jQuery가 로딩될 때까지 jQuery 코드의 실행을 연기할 방법을 찾아야 할 것 같습니다.추가된 태그가 로드 및 구문 분석을 완료했음을 확인하려면 어떻게 해야 합니까?
결과적으로, 비동기 로딩 또한 답변을 포함할 수 있습니다.
무슨 생각 있어요?
제가 얼마 전에 jQuerify 북마크렛에서 편집한 것을 시도해보세요.저는 jQuery를 로드하고 로드 후에 실행할 때 자주 사용합니다.물론 거기에 있는 url을 사용자 지정 jquery에 사용자 자신의 url로 바꿀 수 있습니다.
(function() {
function getScript(url,success){
var script=document.createElement('script');
script.src=url;
var head=document.getElementsByTagName('head')[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
done=true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',function(){
// YOUR CODE GOES HERE AND IS EXECUTED AFTER JQUERY LOADS
});
})();
저는 정말로 jQuery와 jQuery-UI를 하나의 파일로 결합하고 그것에 url을 사용할 것입니다.정말로 따로 로드하고 싶었으면 getScripts를 체인으로 연결하기만 하면 됩니다.
getScript('http://myurltojquery.js',function(){
getScript('http://myurltojqueryUI.js',function(){
//your tab code here
})
});
이것은 중요한 주제에 대한 최고 순위의 질문이기 때문에, @valmarv와 @amparsand의 이전 답변을 바탕으로 이에 대한 저만의 의견을 말씀드리겠습니다.
스크립트를 로드하기 위해 다차원 배열을 사용하고 있습니다.서로 간에 종속성이 없는 것들을 그룹화하면 다음과 같습니다.
var dfLoadStatus = 0;
var dfLoadFiles = [
["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"],
["http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js",
"/js/somespecial.js",
"/js/feedback-widget.js#2312195",
"/js/nohover.js"]
];
function downloadJSAtOnload() {
if (!dfLoadFiles.length) return;
var dfGroup = dfLoadFiles.shift();
dfLoadStatus = 0;
for(var i = 0; i<dfGroup.length; i++) {
dfLoadStatus++;
var element = document.createElement('script');
element.src = dfGroup[i];
element.onload = element.onreadystatechange = function() {
if ( ! this.readyState ||
this.readyState == 'complete') {
dfLoadStatus--;
if (dfLoadStatus==0) downloadJSAtOnload();
}
};
document.body.appendChild(element);
}
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
로드된 후 첫 번째 jquery를 로드하고 다른 스크립트를 한 번에 계속 로드합니다.페이지 어디에서나 배열에 스크립트를 쉽게 추가할 수 있습니다.
dfLoadFiles.push(["/js/loadbeforeA.js"]);
dfLoadFiles.push(["/js/javascriptA.js", "/js/javascriptB.js"]);
dfLoadFiles.push(["/js/loadafterB.js"]);
여기 비동기/지연자바스크립트 로딩을 위한 현대적인 접근방식에 대한 좋은 설명이 있습니다.그러나 인라인 스크립트에서는 작동하지 않습니다.
<script type="text/javascript" src="/jquery/3.1.1-1/jquery.min.js" defer></script>
<script type="text/javascript" defer>
$(function () { // <- jquery is not yet initialized
...
});
</script>
비동기 로드를 위한 가장 간단한 솔루션은 @nilskp - externalize script:
<script type="text/javascript" src="/jquery/3.1.1-1/jquery.min.js" defer></script>
<script type="text/javascript" src="resources/js/onload.js" defer></script>
비동기/지연된 jquery 스크립트 태그 뒤에 이 코드 조각을 추가하면, 이것은 모든 것을 로드할 때 실행해야 하는 것이 무엇이든 누적하는 임시 함수 $를 정의하고, 그 다음에 우리가 완료하면 $를 사용하여 함수를 실행할 수 있습니다.이 코드 조각을 사용하면 문서의 jQuery onload 구문을 더 이상 변경할 필요가 없습니다.
<script defer async src="https://code.jquery.com/jquery-2.2.0.min.js">
<script>
var executeLater = [];
function $(func) {
executeLater.push(func);
}
window.addEventListener('load', function () {
$(function () {
for (var c = 0; c < executeLater.length; c++) {
executeLater[c]();
}
});
})
</script>
......그리고는...
<script>
$(function() {
alert("loaded");
});
</script>
element.addEventListener("load", function () {
$('#tabs').tabs()
}, false);
한번 해보세요.
HTML 파일 끝에 jQuery와 jQuery 종속 코드를 넣습니다.
편집: 조금 더 명확하게
<html>
<head></head>
<body>
<!-- Your normal content here -->
<script type="text/javascript" src="http://path/to/jquery/jquery.min.js"></script>
<script>//Put your jQuery code here</script>
</body>
</html>
jquery가 로드되면 이벤트를 실행할 수 있습니다.
<script type="text/javascript">
(function (window) {
window.jQueryHasLoaded = false;
document.body.addEventListener('jqueryloaded', function (e) {
console.log('jqueryloaded ' + new Date() );
}, false);
function appendScript(script) {
var tagS = document.createElement("script"),
s = document.getElementsByTagName("script")[0];
tagS.src = script.src;
s.parentNode.insertBefore(tagS, s);
if ( script.id == 'jquery' ) {
tagS.addEventListener('load', function (e) {
window.jQueryHasLoaded = true;
var jQueryLoaded = new Event('jqueryloaded');
document.body.dispatchEvent(jQueryLoaded);
}, false);
}
}
var scripts = [
{
'id': 'jquery',
'src': 'js/libs/jquery/jquery-2.0.3.min.js'
},
{
'src': 'js/myscript1.js'
},
{
'src': 'js/myscript2.js'
}
];
for (var i=0; i < scripts.length; i++) {
appendScript(scripts[i]);
}
}(window));
</script>
그런 다음 종속성을 함수로 래핑합니다.
// myscript1.js
(function(){
function initMyjQueryDependency() {
console.log('my code is executed after jquery is loaded!');
// here my code that depends on jquery
}
if ( jQueryHasLoaded === true )
initMyjQueryDependency();
else
document.body.addEventListener('jqueryloaded', initMyjQueryDependency, false);
}());
jquery가 다른 스크립트 다음에 로드가 완료되면 jqueryloaded 이벤트가 실행될 때 종속성이 실행됩니다.
jquery ,jQueryHasLoaded === true입니다, 입니다.initMyjQueryDependency().
시 , 에는, 은 a) 할 jQuery 를 jQuery 하거나 b) 입니다에 .downloadJSAtOnload기능은 다음과 같습니다.
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
$("#tabs").tabs(); // <==== NOTE THIS. This should theoretically run after the
// script has been appended, though you'll have to test this
// because I don't know if the JavaScript above will wait for
// the script to load before continuing
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
윈도우 로드가 완료된 후 스크립트를 로드해야 하는 코드는 다음과 같습니다.
<html>
<head>
<script>
var jQueryLoaded = false;
function test() {
var myScript = document.createElement('script');
myScript.type = 'text/javascript';
myScript.async = true;
myScript.src = jQueryLoaded ? 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' : 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js';
document.body.appendChild(myScript);
if(!jQueryLoaded){
alert('jquery was loaded');
jQueryLoaded = true;
test();
} else {
alert('jqueryui was loaded');
}
}
if (window.addEventListener){
alert('window.addEventListener');
window.addEventListener("load", test, false);
} else if (window.attachEvent){
alert('window.attachEvent');
window.attachEvent("onload", test);
} else{
alert('window.onload');
window.onload = test;
}
</script>
</head>
<body>
<p>Placeholder text goes here</p>
</body>
</html>
Chrome, FF 및 IE9에서 근무했습니다. 도움이 된다면 알려주십시오.
앰퍼샌드의 코드를 기반으로 스크립트가 차례대로 로드되도록 체인을 지원하는 버전은 다음과 같습니다.
var deferredJSFiles = ['jquery/jquery', 'file1', 'file2', 'file3'];
function downloadJSAtOnload() {
if (!deferredJSFiles.length)
return;
var deferredJSFile = deferredJSFiles.shift();
var element = document.createElement('script');
element.src = deferredJSFile.indexOf('http') == 0 ? deferredJSFile : '/js/' + deferredJSFile + '.js';
element.onload = element.onreadystatechange = function() {
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')
downloadJSAtOnload();
};
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener('load', downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent('onload', downloadJSAtOnload);
else
window.onload = downloadJSAtOnload;
<!doctype html>
<html>
<head>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide" >Hide</button>
<button id="show" >Show</button>
<script type="text/javascript">
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState == "loaded" ||
script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
function() {
//YAHOO.namespace("mystuff");
$("#show").click(function() {
$("p").show();
});
$("#hide").click(function() {
$("p").hide();
});
//more...
});
</script>
</body>
</html>
Modernizr.load()는 여기서 언급할 가치가 있다고 생각합니다. 종속성 로드를 매우 잘 처리합니다.
구글 애널리틱스가 사용하는 간단한 속임수가 있습니다.
준비
1.HTML의 머리 부분에 작은 스크립트를 추가합니다.
<script>
window.jQuery_store = [];
window.jQueryReady = function (fn) { jQuery_store.push(fn); }
</script>
jQueryReady 기능은 딜러를 나중에 사용할 수 있도록 배열에 저장합니다.
2.새 JS 스크립트 만들기jquery-ready.js다음 내용:
// When jQuery is finaly ready
$(function() {
// Replace previous implementation
window.jQueryReady = function(fn) {
// jQuery is loaded call immediately
fn();
}
// Call all saved callbacks
for (var i = 0; i < window.jQuery_store.length; ++i) {
try {
window.jQuery_store[i]();
} catch (err) {
console.log(err);
}
}
})
이 스크립트가 로드되면 다음을 수행합니다.
- 까지 기다립니다.
jQuery안전하게 사용할 수 있습니다. - 합니다 합니다.
jQueryReady바로 대리인을 호출하는 새로운 기능을 사용합니다(jQuery는 주어진 시간에 준비됩니다). - 합니다에서 합니다.
jQueryReady,름
3.JQuery가 로드된 후에만 jquery-ready.js가 로드되도록 합니다.바닥글에는 다음과 같은 내용이 있습니다.
<script defer src=".../jquery.min.js">
<script defer src=".../bootstrap.min.js">
... any other plugins for jQuery you probably need
<script defer src=".../jquery-ready.js">
이렇게 하면 jQuery가 실행된 후에만 jquery-ready.js 스크립트가 실행됩니다.
사용.
이제 jQueryReady 기능을 원할 때 언제든지 사용할 수 있습니다.
jQueryReady(function() {
// jQuery is safe to use here
$("div.to-be-hidden").hide();
})
로 하는 <script defer>: http://www.w3schools.com/tags/att_script_defer.asp
한번 .jQuery.holdReady()
"jQuery의 준비 완료 이벤트 실행을 보류하거나 해제합니다." (jQuery 1.6+)
http://api.jquery.com/jQuery.holdReady/
워드프레스 사이트에서 jQuery 로드를 연기하고 싶어서 이를 이용한 모든 레퍼런스를 업데이트할 수 없었습니다.대신 작은 포장지를 써서 jQuery 호출을 대기시키고 최종적으로 로드될 때마다 호출합니다.그것을 머리에 꽂으면 250바이트 정도만 되고, 그것은 jQuery가 기존의 모든 레퍼런스를 변경하지 않고 지연되거나 비동기로 로드될 수 있다는 것을 의미합니다.내 짐을 훨씬 더 좋게 만들었어요.
제 퀵 코드는 모든 jQuery 기능에 대해 작동하지 않을 수도 있지만 지금까지 시도해 본 기능 호출 하나를 제외한 모든 기능에 대해 작동했습니다.보통 저는 사용자 지정 작업을 수행하기 때문에 사용할 수 없지만, 이 토막글을 온라인에 올리려고 생각했습니다.여기 https://github.com/andrewtranter/jQuery_deferred_compat 에서 이용 가능합니다.
html 끝에 있는 모든 스크립트를 http://labjs.com 로 로드하면 100% 솔루션이며 gtmetrix 규칙에 대해 여러 번 테스트했습니다.예제 http://gtmetrix.com/reports/interactio.cz/jxomHSLV
언급URL : https://stackoverflow.com/questions/5852767/possible-to-defer-loading-of-jquery
'programing' 카테고리의 다른 글
| MISRAC가 포인터의 복사본이 메모리 예외를 유발할 수 있다고 명시하는 이유는 무엇입니까? (0) | 2023.09.21 |
|---|---|
| mmap은 언제 사용하시겠습니까? (0) | 2023.09.21 |
| 입력에서 변경 시 이벤트를 프로그래밍 방식으로 강제하려면 어떻게 해야 합니까? (0) | 2023.09.21 |
| Maria에서 데이터 부분 집합 선택 속도를 높이는 방법DB (0) | 2023.09.21 |
| AngularJs 식을 이용한 HTML 복호화 (0) | 2023.09.21 |