사전로드 이미지는 사용자 경험을 향상시키는 좋은 방법입니다. 이미지는 브라우저에 사전로드되며 방문자는 웹 사이트를 매끄럽게 서핑하고 매우 빠른 로딩 속도를 즐길 수 있습니다. 이것은 그림이 많은 비율을 차지하는 이미지 갤러리 및 웹 사이트에 매우 유리합니다. 사진이 빠르고 원활하게 게시되도록하고 웹 사이트 콘텐츠를 탐색 할 때 사용자가 더 나은 사용자 경험을 얻을 수 있도록 도와줍니다. 이 기사는 웹 사이트의 성능과 유용성을 향상시키기 위해 세 가지 예압 기술을 공유 할 것입니다.
방법 1 : CSS 및 JavaScript를 사용하여 사전 로딩을 구현하십시오
CSS, JavaScript 및 두 가지 조합을 포함하여 예비 이미지를 구현하는 방법에는 여러 가지가 있습니다. 이러한 기술은 다양한 설계 시나리오에 따라 해당 솔루션을 설계 할 수 있으며, 이는 매우 효율적입니다.
CSS 만 사용하면 이미지를 쉽고 효율적으로 예압 할 수 있으며 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
#preload-01 {배경 : url (http : //domain.tld/image-01.png) no-Repeat -9999px -9999px; }
#preload-02 {배경 : url (http : //domain.tld/image-02.png) no-Repeat -9999px -9999px; }
#preload-03 {배경 : url (http : //domain.tld/image-03.png) no-Repeat -9999px -9999px; }
이 3 개의 ID 선택기를 (x) HTML 요소에 적용함으로써 CSS의 배경 속성을 통해 오프 스크린 배경의 이미지를 사전로드 할 수 있습니다. 이러한 이미지의 경로가 동일하게 유지되는 한 브라우저는 웹 페이지의 다른 곳에서 호출 될 때 렌더링하는 동안 사전로드 된 (캐시) 이미지를 사용합니다. 간단하고 효율적이며 JavaScript가 필요하지 않습니다.
이 방법은 효율적이지만 개선의 여지가 있습니다. 이 방법을 사용하여로드 된 그림은 페이지의 다른 내용과 함께로드되어 페이지의 전체로드 시간이 증가합니다. 이 문제를 해결하기 위해 페이지가로드 될 때까지 예압 시간을 지연시키기 위해 JavaScript 코드를 추가했습니다. 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
// 더 나은 이미지 preloading @ <a href = "http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/"> http://perishablepress.com/2009/12/28/3-ways-preload-imagesscscscscrscricscripccscript Preloader () {
if (document.getElementById) {
documb
document.getElementById ( "preload-02"). style.background = "url (http : //domain.tld/image-02.png) no-Repeat -9999px -9999px";
documb
}
}
함수 addLoadevent (func) {
var oldonload = Window.onload;
if (typeof window.onload! = 'function') {
Window.onload = func;
} 또 다른 {
Window.onload = function () {
if (oldonload) {
oldonload ();
}
func ();
}
}
}
addloadevent (프리 로더);
스크립트의 첫 번째 부분에서는 클래스 선택기를 사용하여 요소를 가져 와서 배경 속성을 설정하여 다른 이미지를 사전로드합니다.
이 스크립트의 두 번째 부분에서는 addloadevent () 함수를 사용하여 페이지가로드 될 때까지 Preloader () 함수의 로딩 시간을 지연시킵니다.
사용자의 브라우저에서 JavaScript가 제대로 작동하지 않으면 어떻게됩니까? 매우 간단합니다. 이미지는 사전로드되지 않습니다. 페이지가 이미지를 호출하면 정상적으로 표시됩니다.
방법 2 : JavaScript 만 사용하여 사전 로딩을 구현하십시오
위의 방법은 때때로 매우 효율적이지만 실제 구현에 너무 많은 시간이 걸린다는 것을 점차적으로 발견했습니다. 대신, 나는 순수한 JavaScript를 사용하여 이미지를 예압하는 것을 선호합니다. 이러한 두 가지 예압 방법이 아래에 제공되며, 모든 현대식 브라우저에서 아름답게 작동 할 수 있습니다.
JavaScript 코드 세그먼트 1
필요한 이미지의 경로와 이름을 편집하고로드하여 구현하기 쉽습니다.
코드 사본은 다음과 같습니다.
<div>
<script type = "text/javaScript">
<!-//-> <! [cdata [//> <!-var images = new Array ()
함수 preload () {
for (i = 0; i <preload.arguments.length; i ++) {
이미지 [i] = 새로운 이미지 ()
이미지 [i] .src = preload.arguments [i]
}
}
예압 (
"http : //domain.tld/gallery/image-001.jpg",
"http : //domain.tld/gallery/image-002.jpg",
"http : //domain.tld/gallery/image-003.jpg"
))
//-> <!]]> </script>
</div>
이 방법은 특히 많은 수의 이미지를 사전로드하는 데 특히 적합합니다. 내 갤러리 웹 사이트는이 기술을 사용하며 50 개 이상의 사전로드 된 이미지를 가지고 있습니다. 로그인 페이지에 스크립트를 적용하면 사용자가 로그인 계정을 입력하는 한 대부분의 갤러리 사진이 사전로드됩니다.
JavaScript 스 니펫 2
이 방법은 위의 방법과 유사하며 여러 사진을 예압 할 수도 있습니다. 웹 페이지에 다음 스크립트를 추가하고 프로그램 지침에 따라 편집하십시오.
코드 사본은 다음과 같습니다.
<div>
<script type = "text/javaScript">
<!-//-> <! [cdata [///> <!-if (document.images) {
img1 = 새로운 이미지 ();
img2 = 새로운 이미지 ();
img3 = 새로운 이미지 ();
img1.src = "http : //domain.tld/path/to/image-001.gif";
img2.src = "http : //domain.tld/path/to/image-002.gif";
img3.src = "http : //domain.tld/path/to/image-003.gif";
}
//-> <!]]> </script>
</div>
알 수 있듯이 각 이미지 로딩은 "img1 = new image ();"와 같은 변수를 생성해야합니다. "img3.src ="와 같은 이미지 소스 주소 선언
"../path/to/image-003.gif"; ".이 모드를 참조하십시오. 원하는만큼 사진을 많이로드 할 수 있습니다.
우리는이 방법을 다시 개선했습니다. 스크립트를 함수로 캡슐화하고 addloadevent ()를 사용하여 페이지가로드 될 때까지 예압 시간을 지연시킵니다.
코드 사본은 다음과 같습니다.
함수 preloader () {
if (document.images) {
var img1 = new image ();
var img2 = new image ();
var img3 = new image ();
img1.src = "http : //domain.tld/path/to/image-001.gif";
img2.src = "http : //domain.tld/path/to/image-002.gif";
img3.src = "http : //domain.tld/path/to/image-003.gif";
}
}
함수 addLoadevent (func) {
var oldonload = Window.onload;
if (typeof window.onload! = 'function') {
Window.onload = func;
} 또 다른 {
Window.onload = function () {
if (oldonload) {
oldonload ();
}
func ();
}
}
}
addloadevent (프리 로더);
방법 3 : ajax를 사용하여 사전 로딩을 구현하십시오
위에 주어진 방법은 충분히 시원하지 않은 것처럼 보이므로 이제 AJAX를 사용하여 이미지 사전로드를 구현하는 메소드를 살펴 보겠습니다. 이 방법은 DOM, Preloads 이미지뿐만 아니라 CSS, JavaScript 및 기타 관련 사항을 예비로드합니다. ajax를 사용하는 것이 JavaScript를 직접 사용하는 것보다 낫습니다. 장점은 JavaScript와 CSS의로드가 현재 페이지에 영향을 미치지 않는다는 것입니다. 이 방법은 간단하고 효율적입니다.
코드 사본은 다음과 같습니다.
Window.onload = function () {
settimeout (function () {
// js 및 css var xhr = new xmlhttprequest ()를 요청하는 xhr;
xhr.open ( 'get', 'http : //domain.tld/preload.js');
xhr.send ( '');
xhr = 새로운 xmlhttprequest ();
xhr.open ( 'get', 'http : //domain.tld/preload.css');
xhr.send ( '');
// preload image new image (). src = "http : //domain.tld/preload.png";
}, 1000);
};
위의 코드는 "preload.js", "preload.css"및 "preload.png"로 사전로드됩니다. 1000 밀리 초 타임 아웃은 스크립트가 매달려있는 것을 방지하는 것입니다. 이는 일반 페이지의 기능적 문제를 일으 킵니다.
아래에서 JavaScript를 사용하여 로딩 프로세스를 구현하는 방법을 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
Window.onload = function () {
settimeout (function () {
// <head>에 대한 참조
var head = document.getElementsByTagName ( 'head') [0];
// 새로운 CSS
var css = document.createElement ( 'link');
css.type = "text/css";
css.rel = "스타일 시트";
css.href = "http : //domain.tld/preload.css";
// 새 JS
var js = document.createElement ( "스크립트");
js.type = "텍스트/JavaScript";
js.src = "http : //domain.tld/preload.js";
// Preload JS 및 CSS Head.appendChild (CSS);
Head.appendChild (JS);
// 예압 이미지
새 이미지 (). src = "http : //domain.tld/preload.png";
}, 1000);
};
여기서는 DOM을 통해 세 가지 요소를 생성하여 세 가지 파일의 사전로드를 구현합니다. 위에서 언급했듯이 Ajax에서로드 파일은 로딩 페이지에 적용되지 않습니다. 이 관점에서 Ajax 방법은 JavaScript보다 우수합니다.
좋아,이 기사는 여기에 소개 될 것이다. 모든 사람은 이미 이미지 프리 로딩 기술을 구현하는 세 가지 방법을 이해했습니다. 어느 것이 더 효율적입니까? 친구들도 그것을 보았으므로 자신의 프로젝트에 적용하십시오.