JS를 동적으로 삽입하고 콜백 함수를 즉시 실행하는 방법_javascript 기술
- WBOY원래의
- 2016-05-16 15:04:331517검색
본 글의 예시에서는 JS를 동적으로 삽입하고 콜백 함수를 바로 실행하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="loading">加载中……</div>
<mce:script type="text/JavaScript">
<!--
function loadJs(id,url,callback){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.id = id;
script.onload = script.onreadystatechange = function(){
alert(script.readyState);
if(script.readyState && script.readyState != 'loaded' && script.readyState != 'complete') return ;
script.onreadystatechange = script.onload = null
if(callback) callback();
}
document.body.appendChild(script);
}
loadJs('jQuery','jquery.js',function(){$('#loading').html('jquery.js加载完毕')})
// --></mce:script>
</body>
</html>
js 파일의 동적 삽입은 페이지 로딩 속도와 도메인 간 문제를 개선하는 데 매우 중요한 역할을 합니다. 위의 내용은 간단한 예입니다.
Onreadystatechange는 ie에서 지원되지만 onload는 지원되지 않습니다
Onload는 Firefox에서 지원되지만 onreadystatechange는 지원되지 않습니다
즉, 반드시 로드되거나 트리거가 완료되는 것은 아니며 둘 다 트리거되므로 또는를 사용하여 판단하세요.
script.onreadystatechange 및 script.readyState의 대소문자 형식은 대소문자를 구분하지 않으므로 찾기 쉽지 않은 오류가 발생할 수 있다는 점에 유의해야 합니다.
더 많은 JavaScript 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다: "JavaScript 전환 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 특수효과 및 기법 요약", "JavaScript 오류 및 디버깅 기술 요약", "JavaScript 데이터 구조 및 알고리즘 기법 요약", "JavaScript 순회 알고리즘 및 기법 요약" 및 "JavaScript 수학적 연산 사용법 요약"
이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.