일부 이미지를 표시하는 간단한 회전식 컨베이어가 있습니다. 캐 러셀이 매 x 초마다 자동으로 회전 할 것으로 예상됩니다.자바 스크립트의 순환 진행 표시기
현재 진행 상황을 보여주기 위해 x 초 동안 너비를 움직이는 div가 있습니다. 이를 통해 사용자는 다음 이미지가 표시 될 때까지 기다려야하는 시간을 볼 수 있습니다. 사용자가 이미지를 가리키면 진행 막대가 축소됩니다. 마우스를 놓으면 다시 채우기 시작합니다.
그러나 지루한 막대를 사용하는 대신 원형을 사용하려고했습니다. 아약스가로드되는 동안 회전하는 원과 같은 종류의 것을 볼 수 있습니다. 나는 이것을 어떻게하는지 모른다.
아무도 도와 줄 수 있습니까? 심지어 가능할까요?
표현하고자하는 다른 각도를 나타내는 일련의 이미지를 생성하여 구별을 원하는만큼 세밀하게 만듭니다. 0 %, 25 %, 75 % 및 100 % "진행률"을 나타내는 네 개의 이미지 또는 각 1 %의 차이를 나타내는 100 개의 이미지를 만들 수 있습니다.
바코드의 너비를 변경하는 대신 현재 진행률에 해당하는 이미지를 바꿀 수 있습니다. if (progress < 25) image = '0percent.png'; (등).
HTML 5를 지원하는 일부 최신 브라우저에서는 이미지를 사용하지 않고이 작업을 수행 할 수 있지만 그 밖의 곳에서는 전혀 쓸모가 없습니다.
표준 "로딩"그래픽과는 매우 다른 점에 유의하십시오. 이러한 회 전자는 문서가로드 될 때까지 반복적으로 회전하기 때문에 진행을 전혀 나타내지 않습니다. 스피너는 애니메이션 GIF로 만들어 지므로 하나의 이미지가 제거 될 때까지 이미지가 페이지에 앉아서 즐겁게 회전 할 수 있습니다.
, 진행률 표시기의 모든 단계에 대한 N GIF를/PNG 파일의 혼란을 피하기 모든 단계의 단일 스프라이트를 생성하고 스택하려면 (예 : 진행 표시기가 40x40이고 8 단계를 표시하려는 경우 320x40 이미지를 만들고 왼쪽에서 오른쪽으로 연속 된 값을 늘려서 배치하십시오).
크기가 단일 단계 크기 (이 예제에서는 40x40)로 고정 된 새 요소를 만들고이 스프라이트를 배경 이미지로 지정하십시오.
그런 다음 타이머 (또는 setTimeout/Interval)에서 틱을 수신하면 배경 이미지의 position-x 속성을 한 크기 (0, 40, 80, 120 등)만큼 이동하십시오.
이것은 모든 단계마다 별도의 이미지를 갖는 것보다 훨씬 빠르며 최종 사용자는 첫 번째 이벤트에서 전체 스프라이트를 즉시 미리로드합니다.
나는 수동으로 진행률 표시기를 만들게하여 영감을 얻었다. 나는 demo of it here를 만들었다. 그런 다음 두 손가락을 짚어서 플러그인으로 바꾸기로 결정했습니다. 플러그인은 타이머와 몇 가지 다른 옵션을 포함합니다. plugin demo을 확인하십시오. 아마도이 방법이 효과가 있습니까?
멋진 데모. 그게 할 수있는 좋은 방법이에요! 단단한 도넛 모양의 로더가 필요하기는하지만 여러 이미지가 작동하지는 않지만 정말 좋은 방법입니다! – Terry
회전시키다 ^.^ – mpen
배경 이미지를 업데이트하기 위해 setInterval을 사용하여 끝내게되었습니다. 매우 감사합니다! – Terry