CSS, JavaScript 및 Ajax를 사용하여 이미지 사전 로드를 구현하는 방법
- 高洛峰원래의
- 2016-12-03 15:45:011489검색
이미지를 미리 로드하는 것은 사용자 경험을 향상시키는 좋은 방법입니다. 브라우저에 미리 로드된 이미지를 통해 방문자는 사이트를 원활하게 탐색하고 엄청나게 빠른 로딩 시간을 즐길 수 있습니다. 이는 이미지가 큰 비율을 차지하는 이미지 갤러리 및 웹 사이트에 매우 유용하며, 이미지가 빠르고 원활하게 게시되도록 보장하고 사용자가 웹 사이트 콘텐츠를 탐색할 때 더 나은 사용자 경험을 얻는 데도 도움이 됩니다. 이 기사에서는 웹 사이트 성능과 유용성을 향상시키는 세 가지 사전 로딩 기술을 공유합니다.
이미지 사전 로드를 구현하는 데는 CSS, JavaScript, Ajax의 세 가지 방법을 사용할 수 있습니다. 이러한 메서드의 구현은 아래에 소개되어 있습니다.
CSS 사용
CSS를 사용하여 페이지 요소의 배경에 이미지를 로드하면 됩니다. 이 방법은 간단하고 효율적입니다.
#div1{background:url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px-9999px; }
#div2{background:url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px-9999px; }
다른 곳에서 호출하면 브라우저는 경로가 일관적인 한 렌더링 프로세스 중에 미리 로드된(캐시된) 이미지를 사용합니다. 간단하고 효율적이며 JavaScript가 필요하지 않습니다.
단점: 이 방법을 사용하면 페이지 로드와 동시에 이미지도 로드되므로 페이지 로드 시간이 길어지므로 JavaScript를 사용하여 완료를 돕는 것이 더 효율적입니다.
CSS와 JavaScript를 함께 사용
functionpreload(){
if(document.getElementById) {
document.getElementById("div1").style.background ="url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px -9999px";
document.getElementById("div2").style.background ="url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px -9999px";
}
}
functionaddLoadEvent(func){
varoldonload =window.onload;
if(typeofwindow.onload !='function') {
window.onload = func;
} else{
window.onload =function(){
if(oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preload);
페이지가 로드된 후 이미지 로드를 설정하므로 따로 작업할 필요가 없습니다. 이미지와 페이지를 동시에 로딩하면 접속 시간이 늘어납니다.
자바스크립트 실행이 실패하더라도 걱정하지 마세요. 이미지가 호출되면 정상적으로 표시될 뿐입니다.
JavaScript를 사용하여
방법 1
varimages =newArray()
functionpreload(){
for(i =0; i < preload.arguments.length; i++) {
images[i] = newImage()
images[i].src = preload.arguments[i]
}
}
preload(
"http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg",
"http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg"
)
방법 2
이 방법은 실제로 원리는 1번 방법과 동일하지만, 배열로 구현하지 않고 Image 객체의 src 음수 값을 별도로 사용합니다.
if(document.images) {
img1 = newImage();
img2 = newImage();
img3 = newImage();
img1.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
img2.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
}
Ajax 사용
위의 모든 방법이 충분하지 않다고 가정하면 다른 방법이 있습니다. Ajax. 이미지 사전 로딩을 구현합니다. DOM을 사용하여 이미지, CSS, JavaScript 등 무엇이든 로드할 수 있는 사전 로드를 구현합니다. JavaScript를 직접 사용하는 것과 비교할 때 Ajax를 사용하면 현재 페이지에 영향을 주지 않고 CSS와 JavaScript를 미리 로드할 수 있다는 장점이 있습니다. 이것은 실제로 이미지에는 문제가 되지 않지만 이 방법은 여전히 매우 간단하고 효율적입니다.
window.onload =function(){
setTimeout(function(){
// XHR to request a JS and a CSS
varxhr =newXMLHttpRequest();
xhr.open('GET','http://domain.tld/preload.js');
xhr.send('');
xhr = newXMLHttpRequest();
xhr.open('GET','http://domain.tld/preload.css');
xhr.send('');
// preload image
newImage().src ="http://domain.tld/preload.png";
}, 1000);
};
이와 같이 이 코드는 사전에 preload.js, preload.css, preload.png의 세 가지 파일을 로드합니다. 1초 지연을 설정하는 것은 주로 JavaScript 파일 로딩으로 인해 일반 페이지에서 기능적 문제가 발생하는 것을 방지하기 위한 것입니다.
캡슐화하기 위해 기본 JavaScript를 사용하여 이 코드 조각을 작성하는 방법을 살펴보겠습니다.
window.onload =function(){
setTimeout(function(){
// reference to <head>
varhead =document.getElementsByTagName('head')[0];
// a new CSS
varcss =document.createElement('link');
css.type = 'text/css';
css.rel = 'stylesheet';
css.href = 'http://domain.tld/preload.css';
// a new JS
varjs =document.createElement('script');
js.type = 'text/javascript';
js.src = 'http://domain.tld/preload.js';
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
newImage().src ='http://domain.tld/preload.png';
}, 1000);
};
여기서 세 가지 요소는 다음과 같습니다. 페이지에 세 개의 파일을 미리 로드하기 위해 DOM을 통해 생성되었습니다. 원본 기사에서 언급했듯이 이 접근 방식은 Ajax에는 그다지 좋지 않습니다. 미리 로드된 파일 콘텐츠를 로드 페이지에 추가하면 안 됩니다.