다양한 js 이미지 프리로딩 구현 방법 공유_javascript 기술

일반적으로 이미지를 미리 로드하는 방법에는 여러 가지가 있습니다

1.html 태그 또는 CSS 로딩 이미지

당연히 img 태그를 사용하거나 태그의 background-image 속성을 통해 이미지를 미리 로드할 수 있습니다. 그러나 처음에 너무 많은 사진을 로드하여 경험에 영향을 미치는 것을 방지하기 위해. 일반적으로 문서가 렌더링된 후(window.onload 등을 사용하여) 문서를 로드하는 것이 가장 좋습니다.

2. 사전 로드를 구현하는 순수 js

Empty City Plan-Code의 Javascript는 이미지 사전 로드를 구현합니다. 전체 사전 로드 예는
입니다.

function preloadimages(arr){  
  var newimages=[], loadedimages=0
  var postaction=function(){} //此处增加了一个postaction函数
  var arr=(typeof arr!="object")? [arr] : arr
  function imageloadpost(){
    loadedimages++
    if (loadedimages==arr.length){
      postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
    }
  }
  for (var i=0; i<arr.length; i++){
    newimages[i]=new Image()
    newimages[i].src=arr[i]
    newimages[i].onload=function(){
      imageloadpost()
    }
    newimages[i].onerror=function(){
      imageloadpost()
    }
  }
  return { //此处返回一个空白对象的done方法
    done:function(f){
      postaction=f || postaction
    }
  }
}

루프 내에서 Image 객체를 생성하고 해당 객체의 src를 지정된 이미지로 설정한 후 이미지 로딩 완료 onload = function(){imageloadpost()}를 모니터링하는 것입니다. , imageloadpost가 실행됩니다. IE6에는 여전히 문제가 있는 것으로 나타났습니다. 미리 로드된 이미지가 이미 메모리에 있으면 img.onload 이벤트가 다시 트리거되지 않습니다. 하지만 IE7+에는 문제가 없습니다. 다른 브라우저에서는 문제가 없으므로 위의 img.onload 청취 이벤트에는 호환성 문제가 없습니다.

3.Ajax는 사전 로딩을 구현합니다

Ajax 요청은 모든 데이터를 요청할 수 있으며 사진도 예외는 아닙니다. js/css 프리로딩을 살펴보겠습니다

// XHR to request a JS and a CSS 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.js'); 
    xhr.send(''); 
    xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.css'); 
    xhr.send(''); 

Ajax 이미지 사전 로드는 실제로 순수 js 이미지 사전 로드와 동일합니다

new Image().src = "http://domain.tld/preload.png"; 

여기서 설명하는 것은 ajax 로딩이라는 것뿐입니다. 새로운 이미지는 모두 ajax get 요청이라는 것을 알 수 있습니다.

위 내용은 이 글의 전체 내용입니다. js 이미지 프리로딩을 이해하는 데 도움이 되기를 바랍니다.