CSS의 js 코드 또는 javascript_javascript 팁을 미리 로드하세요.
- WBOY원래의
- 2016-05-16 18:28:501098검색
일반적으로 파일을 미리 로드하는 방법에는 xhr과 동적으로 노드를 삽입하는 두 가지 방법이 있습니다. 동적으로 노드를 삽입하는 것은 가장 간단하고 가장 널리 사용되는 비동기 로딩 방법입니다(예: yui의 Get 모듈). 그러면 동적으로 삽입된 노드 메서드를 사용하여 로드된 파일은 로드 후 즉시 실행됩니다. 한편, 자바스크립트 실행은 브라우저의 js를 차지합니다. 반면에 프로세스는 페이지 구조를 변경할 수도 있으며 CSS를 실행하면 전체 페이지가 변경될 가능성이 더 높습니다. xhr 메소드는 동일한 도메인의 제한으로 인해 스크립트를 실행하지 않지만 웹 사이트의 정적 파일은 이제 CDN 서버에 배포되지만 CSS js 파일을 미리 로드하는 방법은 다소 신비해졌습니다.
Stoyan Stefanov는 파일을 실행하지 않고 로드하는 방법을 간결하게 설명합니다. 원본 텍스트는 http://www.phpied.com/preload-cssjavascript-without-execution/
에서 찾을 수 있습니다. 구체적인 방법은 다음에서 new Image().src를 사용하는 것입니다. IE는 파일을 미리 로드하는 반면 다른 브라우저는 동적으로 삽입된
코드 복사 코드는 다음과 같습니다
window.onload = function () {
var i = 0,
max = 0,
o = null,
// 미리 로드할 항목 목록
preload = [
'http://tools.w3clubs.com/pagr2/.sleep.expires.png',
'http://tools .w3clubs.com/pagr2/ .sleep.expires.js',
'http://tools.w3clubs.com/pagr2/.sleep.expires .css'
],
isIE = navigator.appName.indexOf('Microsoft') === 0
for (i = 0, max = preload .length; i < i = 1) {
if (isIE) {
new Image().src =
계속; >o = document.createElement( 'object');
o.data = preload[i];
// IE 항목, 그렇지 않으면 0x0이 괜찮습니다.
//o.width = 1;
//o.height = 1;
//o.style.visibility = "hidden";
//o.type = "text/plain" // IE
o.width = 0;
o .height = 0;
// FF만 헤드에 추가됩니다.
// 다른 모든 항목에는 본문이 필요합니다
document.body.appendChild(o); }
};
데모 이용 가능
http://phpied.com/files/object-prefetch/page1.php?id=1
몇 가지 참고 사항: 1. ff에서 new Image().src를 사용할 수 없는 이유는 ff가 이미지에 대해 별도의 캐시를 구현하기 때문입니다. 동시에 사파리와 크롬은 캐시되지 않는 것 같습니다.
2. 동적으로 삽입된 객체 태그를 헤드가 아닌 부분에 삽입해야 로드가 실행됩니다.
3. ie7 ie8은 동적 개체를 사용하여 일부 코드(코드 주석에 언급됨)를 통해 파일을 로드할 수도 있습니다. 하지만 저자는 그 물건이 대개 돈을 많이 소모한다는 사실을 발견했습니다.
직접 실험을 통해 도움이 필요한 학생들이 시도해 볼 수도 있다는 것을 알게 되었습니다. .
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.