CSS 배경 이미지 프리 로더

Question

CSS 배경 이미지 작업 사전 로더를 만드는 데 문제가 있습니다. 여기 상황은 다음과 같습니다. 몇 가지 숨겨진 요소가 있습니다. 각 요소에는 CSS 배경 이미지가 있습니다.

사용자가 "시작"버튼을 클릭하면 jquery를 사용하여 요소를 표시합니다 (하나씩 표시됨 : 다른 하나는 표시됨, 다른 하나는 숨김). 그러나 "시작"버튼은 모든 이미지가로드 된 후에 만 ​​사용할 수 있어야합니다.

나는이 프리 로더를 사용하고 있습니다 : 그러나

function preloadimages(arr) { 
    var newimages=[], loadedimages=0 
    var postaction=function(){} 
    var arr=(typeof arr!="object")? [arr] : arr 

    function imageloadpost() { 
     loadedimages++ 
     if (loadedimages == arr.length) { 
      postaction(newimages) //call postaction and pass in newimages array as parameter 
     } 
    } 

    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 { //return blank object with done() method 
     done:function(f) { 
      postaction = f || postaction //remember user defined callback functions to be called when images load 
     } 
    } 
} 

preloadimages('img01','img02','img03') 
    .done(function(images) { 
     alert(images.length + " images loaded"); 
    }); 

이, 만로드 한 이미지를.

결과가없는 다른 코드도 시도해 보았습니다. 이미지 프리 로더가 실제로 CSS 배경 이미지에서 작동해야합니까? 아니면 태그에 대해서만 의미가 있습니까?

Answer 1

내가 도움이 될만한 배경 이미지를 미리로드하기위한 정말 멋진 순수 CSS 솔루션이 있습니다. 그 배경 개념은 페이지가로드 될 때로드되지만 표시되지 않는 가상 요소에 배경 이미지를 배치하는 것입니다. 이렇게하면 브라우저가 이미지를로드하여 나중에 다른 요소에서 호출 할 때 준비가 완료됩니다. http://www.thecssninja.com/css/even-better-image-preloading-with-css2

Answer 2

나는 일을 가지고 :

.main-element { 
    background-image: url(your_url_here); 
} 
.main-element:after { 
    display: none; 
    content: url(your_url_here), url(another_url_here), url(another_url_here), etc. 
} 
.hidden-element { 
    display: none; 
    background-image: url(your_url_here); 
} 
.main-element:hover { 
    .hidden-element: display: block; 
} 

여기이 기술에 대한 자세한 정보와 문서에 대한 링크를입니다 : 여기에 몇 가지 예제 코드입니다! 이것은 아주 간단 JQuery와 솔루션입니다 :

$(".hidden-element").show(); $(".hidden-element").hide(); 

이는, 사용자에 의해 감지, 여전히 내가 아직로드가 완료되면 콜백을 사용할 수 없습니다 해요 이미지를로드 할 브라우저를 강제로 보이는 것이 아니라, 이 작업에 ratice