2
저는 javascript/jquery + html에서 애니메이션을 수행하고 있으며 코드는 다음과 유사합니다 (버전 단순화).이미지의 두 프리 로더
HTML :
<div id="animationList"> <ul> <li> <div>Testing animation 1</div> <div class="resolutionRow"> <span>execute</span> </div> </li> <li> <div>Testing animation 2</div> <div class="resolutionRow"> <span>execute</span> </div> </li> </ul> </div> <div id="content"> <div id="statusBar"> <div id="progressBar"></div> </div> <div id="animation"></div> </div>자바 스크립트 :
var imgCount[0]=30; //number of images for Testing animation 1 var imgCount[1]=1000; //number of images for Testing animation 2 var progressWidth=0; //default progressbar width var imgArray=new Array(); //array which will hold image sources strings var checkProgress; var goAnim; //if user choose an animation $('#animationList li span').click(function() { //need to stop older animation if(goAnim) clearInterval(goAnim); //ensure just one checkProgress interval is running (doesn't work) if(checkProgress) clearInterval(checkProgress); //get animation id animId=$(this).parent().parent().index(); //call index function start(); }); function start() { //clear array with image sources if(imgArray.length>0) imgArray.length=0; //check progress status checkProgress=setInterval(checkProgWidth,10); //execute images preloader loadImageset(1); }; //check progress percentage function checkProgWidth() { //start animation after progress percentage is 100 (if all images are loaded) if(progressWidth==100) { clearInterval(checkProgress); //stop this function goAnim=setInterval(animation,1000); //execute interval for animation function (won't write it here, it's not important) } }; //preload images to browser's cache function loadImageset(i) { //merge img source imgSrc=animId+'/'+i+'.jpg'; //create image object var imgCaching=new Image(); //fill image object source imgCaching.src=imgSrc; //insert image source into array imgArray[i]=imgSrc; //do this stuff after image is loaded imgCaching.onload=function() { //count progress percentage progressWidth=Math.round((i/imgCount)*100); //set css of preloader div $('#statusBar').css({ width:progressWidth+'%', backgroundColor:'#fff' }); $('#statusBar').text(progressWidth+'%'); //load next image... if(i<=imgCount[animId]) { i++; loadImageset(i); } //...or return else return; }; };
포인트
나는 애니메이션 및 기타 사업부의 목록과 함께 하나 개의 사업부를 가지고있다가 애니메이션에 대한 컨테이너입니다 (애니메이션 =이 컨테이너의 배경 이미지 변경). 첫 번째 div에서 span을 클릭합니다. 애니메이션을 실행합니다. 브라우저의 캐시에 이미지를로드하고 이미지가로드되는 동안 진행률 백분율을 계산하는 간격 함수 checkProgWidth()가 있습니다.이 값이 100이면 모든 이미지가로드됩니다. 그런 다음 간격을 멈추고 애니메이션을 시작하십시오.데모 코드 http://hlavsene.sav.sk/test/sos.
문제 :
1) 하나 개의 애니메이션의 이미지가로드 (진행 막대가 이동에있을 때) 그 동안 I (선택) 동일하거나 처음의 이미지로드를 중지해야 다른 애니메이션을 클릭 애니메이션을 시작하고 두 번째 애니메이션의 로딩을 시작합니다. 그러나 나는 그것을 할 수 없다. 데모 사이트에서 애니메이션 3과 4 (이미지가 많아서로드가 길다)에서 볼 수 있습니다. 진행 막대가 화가 나기 시작합니다. 브라우저가 두 애니메이션의 이미지를로드하기 시작하면 첫 번째 애니메이션의 이미지로드가 중지되지 않습니다. 아니면 또 다른 문제가있을 수 있습니다 .. 당신은 어떤 조언을해야합니까?
2) 경우에 따라 이미지가 변경 될 때까지 깜박이는 경우가 있습니다. 왜 그런지 알아?
정말 도움이됩니다. 고마워.