웹 프론트엔드 JS 튜토리얼 CSS의 js 코드 또는 javascript_javascript 팁을 미리 로드하세요.

CSS의 js 코드 또는 javascript_javascript 팁을 미리 로드하세요.

May 16, 2016 pm 06:28 PM
css javascript 예압

일반적으로 파일을 미리 로드하는 방법에는 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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? 웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? Apr 05, 2025 pm 10:33 PM

최근 웹 페이지에 로컬로 설치된 글꼴 파일을 사용하여 인터넷에서 무료 글꼴을 다운로드하여 시스템에 성공적으로 설치했습니다. 지금...

그림에 사용 된 인코딩 된 글꼴은 무엇입니까? 이 글꼴 스타일을 프로젝트에 적용하는 방법은 무엇입니까? 그림에 사용 된 인코딩 된 글꼴은 무엇입니까? 이 글꼴 스타일을 프로젝트에 적용하는 방법은 무엇입니까? Apr 05, 2025 pm 05:06 PM

프로그래밍 및 웹 디자인에서 인코딩 된 글꼴의 소개 및 사용 올바른 글꼴을 선택하면 코드의 가독성과 미학을 크게 향상시킬 수 있습니다. 최근의,...

요소 UI의 el-table에서 병합 행의 호버 스타일과 논리를 조정하는 방법은 무엇입니까? 요소 UI의 el-table에서 병합 행의 호버 스타일과 논리를 조정하는 방법은 무엇입니까? Apr 05, 2025 pm 07:45 PM

El-Table에서 병합 된 행의 호버 스타일과 논리를 조정하는 방법은 무엇입니까? 요소 사용 ...

CSS에서 요소를 회전시켜 수평 옵션의 수평 스크롤 효과를 달성하는 방법은 무엇입니까? CSS에서 요소를 회전시켜 수평 옵션의 수평 스크롤 효과를 달성하는 방법은 무엇입니까? Apr 05, 2025 pm 10:51 PM

CSS에서 수평 옵션의 수평 스크롤 효과를 달성하는 방법은 무엇입니까? 현대적인 웹 디자인에서 수평 탭과 같은 효과를 얻고 마우스를 지원하는 방법 ...

& lt; figure & gt; CSS의 요소? & lt; figure & gt; CSS의 요소? Apr 05, 2025 pm 04:51 PM

CSS의 요소는 무엇입니까? 학습 및 CSS를 사용하는 동안 & lt ...와 같은 덜 일반적인 HTML 요소가 발생할 수 있습니다.

el-table에서 병합 행의 호버 효과를 사용자 정의하는 방법은 무엇입니까? el-table에서 병합 행의 호버 효과를 사용자 정의하는 방법은 무엇입니까? Apr 05, 2025 pm 06:54 PM

el-table에서 병합 행의 호버 효과를 사용자 정의하는 방법은 무엇입니까? 요소 사용 ...

프론트 엔드 진행 막대에서 링 효과 및 마우스 프롬프트 정보를 달성하는 방법은 무엇입니까? 프론트 엔드 진행 막대에서 링 효과 및 마우스 프롬프트 정보를 달성하는 방법은 무엇입니까? Apr 05, 2025 pm 07:54 PM

프론트 엔드 진행 막대에서 링 효과 및 마우스 프롬프트를 달성하는 방법은 무엇입니까? 프론트 엔드 진행 막대를 설계 할 때 진행률 바가운데 링 효과 및 마우스 움직임을 달성하는 방법 ...

CSS와 여러 줄의 텍스트를 정렬하고 강조하는 방법은 무엇입니까? CSS와 여러 줄의 텍스트를 정렬하고 강조하는 방법은 무엇입니까? Apr 05, 2025 pm 08:00 PM

CSS와 여러 줄의 텍스트를 정렬하고 강조하는 방법은 무엇입니까? 매일 웹 디자인에서는 종종 여러 줄의 텍스트를 특수 스타일로 스타일링해야합니다 ...

See all articles