스프라이트 애니메이션이있는 프리 로더

Question

저는 JS에 상당히 익숙합니다. 몇 가지 린다 (lynda) 과정을 밟았지만, 스프라이트 프리 로더 (animated)를 만들어 내면 되겠다. 인터넷 검색, stackoverflow를 통해 많은 검색 봤는데, 내가 원하는 것을 가까이 왔지만 그것을 착륙하지 않았다. 요컨데, 내가 만든이 로고가 스프라이트로 이미 설정되어 있으므로 스프라이트를로드 된 파일의 비율에 따라 애니메이션으로 만들 수 있습니다.

Ex. 0 % -15 % 15 % ~ 30 % 사이의 첫 번째 것, 두 번째 것, 마지막까지 div를 visiblity로 설정할 지점 : 숨김, 예 :

HTML

<div id="preloader"> 

CSS

#preloader { 
margin: 0-auto; 
width: 450px; 
height: 400px; 
background-color: #282727; 
background-image: url(http://roprojects.net/preloader/sprite.PNG) 
} 

JS 확실하지, 아래 서면 바보 같다 경우 죄송합니다.

// var percent = Something that would get the numeric progress of the page load; 
$(window).load(function() { 
// example of first animation. And I don't even know how I should be going on from here. 
// Maybe a for statement, some sort of a loop, was even thinking conditionals. 
// Maybe a case/switch 
// if (percent > 15 && percent <= 30) {below } 
    $('#preloader').css('backgroundPosition', '0 -400px'); 
}); 
// But ultimately that would require it to ..update itself (loop, I guess?) 

이것은 첫 번째 게시물입니다. 시간과 인내심에 감사드립니다. 모든 외부 참조도 환영합니다. 나를 대신 작성해야합니다. 다시 lot! 감사합니다.

편집 스프라이트 자체. http://roprojects.net/preloader/sprite.PNG

편집 # 2 내가 지금 여기있다, 나는 또한 프리 로더의 최종 결과의 예를 제공해야 실현했습니다 http://www.fk-agency.com/은. 그래서이 JS를 통해보고에 의해 실현

if(navigator.appName == "Microsoft Internet Explorer") 
{ 
    var pos = navigator.appVersion.indexOf("MSIE"); 
    var ver = navigator.appVersion.substr(pos,8); 
    if((ver == "MSIE 6.0") || (ver == "MSIE 7.0")) { var oldie = true} 
}  
    if(oldie != true){ 
    $(window).load(function() { 
     setTimeout(function(){ 
     $("#loading").fadeOut(function() { 
      $("#container").fadeIn(1500) 
     }) 
     },300); 
    }) 
    } 

그래서 나는이에서지고있어하는 것은 우리가 browsercheck을하고 모든 게 좋은 운동을하는 경우, 페이지가로드되면, 프리 로더 DIV 메인 페이지를 페이드 아웃하고 있다는 것입니다 그러나 그 스프라이트가 어떻게 채워지는지 알지 못한다. (나는 두 개의 이미지 만 있다고 가정하고, 나머지는 왼쪽에서 오른쪽으로 완성합니다.) css 속성 변경을 숫자 페이지로드 프로세스 자체에 바인딩하는 방법을 알아 내야합니다. ... 퀘스트가 계속됩니다.

Answer 1

i++을 백분율 코드와 바꾸십시오.
JS :

var i = 1; 
setInterval(function() { 
    if (i < 318) { 
     i++; 
    } else { 
     document.getElementById("transparentImg").style.display = "none"; 
     document.getElementById("percentage").style.display = "none"; 
     document.getElementById("background").style.display = "none"; 
    } 
    document.getElementById("percentage").style.width = i + "px"; 
}, 100); 

HTML :

<div id="background"><div/> 
<div id="percentage"><div/> 
<img id="transparentImg" src="http://vividvid.tk/images/imageedit_4_9586029984.gif"/> 

CSS :

body{ 
    background-color: black; 
} 
#percentage{ 
background-color: rgb(255,255,255); 
    width:320px; 
    height:80px; 
    margin-left:-150px; 
    left:47%; 
    margin-top:-40px; 
    top:50%; 
    position:absolute; 
    z-index:1; 
} 
#background{ 
    background-color: rgb(100,100,100); 
    width:320px; 
    height:80px; 
    margin-left:-150px; 
    left:50%; 
    margin-top:-40px; 
    top:50%; 
    position:absolute 
} 
#transparentImg{ 
    width:320px; 
    position:relative; 
    top:0px; 
} 

Answer 2

성능 API window.performance을 선택하면 로딩 그래픽을 켜기 위해 필요한 모든 데이터를 찾을 수 있습니다. 당신은 단지 JS로 시작하면 다시 생각

https://developer.mozilla.org/en-US/docs/Navigation_timing

는 성능 API로 시작하는 것은 잔인한 일 수 있습니다.

는 귀하의 처분에 간단한 도구에 대해 당신에게 개요를 제공하려면 : 그것은 의미가있는 경우 사용자가 탭을보고 (이 기능은 사용자의 기능을 효율적으로 실행됩니다

• requestAnimationFrame(yourFunction), 컴퓨터 수 실제로 렌더링합니다.) 함수 안에 아무 곳에 나 넣고 그 자체로을 호출하게하면 효율적인 애니메이션 루프를 통해 이미지를 부드럽게 움직일 수 있습니다.

• 이벤트 리스너. 이미 하나를 사용하고 있습니다. 문서가로드 될 때 현재 코드가 실행됩니다.물론로드하는 모든 단일 리소스에로드 이벤트를 추가하고 애니메이션에서 무언가를 업데이트 할 수 있습니다.

  이벤트 리스너가 많아서 건 모든 내용을 듣고 적절한 업데이트를 수행 할 수 있으므로 아무 일도 일어나지 않으면 모두 시간을 확인하지 않아도됩니다. 리소스가로드 될 때마다 단일 카운터 을 1로 업데이트하고 리소스의 총량을 로 나누면 백분율이 계산됩니다.

• 캔버스 : 나는 당신의 스프라이트가 마음에 들지만, CSS로 애니메이션 될 수 있다는 것은 의심의 여지가 없지만, 특수 효과에 대한 많은 제어권을 원하거나 자신의 이미지를 생성하고 애니메이션을 적용하거나 할 수 있습니다. 색상 변경, 변환, 블렌딩, 그리기와 같은 스프라이트 작업, 캔버스는 친구가되고 싶어 할 것입니다.

그냥 내가 로딩 애니메이션을 (캔버스 기준) 할 것입니다 방법에 작은 바이올린을 만드는 재미를했다 당신은 영감 http://jsfiddle.net/bbVTB/2/

를 원하는 경우, 귀하의 로딩 시간은 한 무리의보다 긴 것으로 예상되지 않는 한 몇 초 동안 나는 실제 로딩 진행 상황을 시각적으로 보여 주면서 귀찮게하지 않고 오히려 사용자를 혼란스럽게하고 장단기 진도에 대한 느낌을주었습니다. 그래서 어리석은 회전과 동시에 느린 "제직"이 가능합니다. 사용자는 로딩이 끝날 때까지 얼마가되는지에 대해 궁금 할 것입니다.

너무 오래 사람들이 인내심을 잃고 떠나지 않는 한 실제로 로딩 시간을 표시하는 것은 실수 일 수 있습니다. 그것은 시간을 기다리며 시계를 쳐다 보는 것과 같습니다. 대신에 사용자가 조금 즐겁게 뭔가를 보게하는 것이 어떨까요? 그러나 이것은 프로그래밍과 관련이있는 것이 아니라 디자인 결정입니다.