링크를 클릭하거나 IE의 페이지에서 양식을 제출 한 후에도 애니메이션 GIF가 계속 애니메이션되도록 만드는 방법을 아는 사람이 있습니까? 이것은 다른 브라우저에서 잘 작동합니다.
감사.
답변
허용 된 솔루션이 저에게 효과적이지 않았습니다.
더 많은 조사를 한 후에이 해결 방법 을 발견했으며 실제로 작동합니다.
그 요점은 다음과 같습니다.
function showProgress() {
var pb = document.getElementById("progressBar");
pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
pb.style.display = '';
}
그리고 당신의 html에서 :
<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
<img src="./progress-bar.gif" width="200" height ="40"/>
</div>
따라서 양식이 제출되면 <img/>태그가 삽입되고 어떤 이유로 든 애니메이션 문제의 영향을받지 않습니다.
Firefox, ie6, ie7 및 ie8에서 테스트되었습니다.
답변
답변
IE는 링크를 클릭하면 현재 페이지 내용이 대체 될 새로운 탐색이 시작된다고 가정합니다. 이를 확인하는 프로세스의 일부로 GIF 애니메이션 코드를 중지합니다. 나는 당신이 그것에 대해 할 수있는 일이 없을 것입니다 (실제로 onclick 이벤트에서 false를 반환하는 경우를 탐색하지 않는 한).
답변
다음은 method = “post”로 양식 제출시 잘 작동하는 jsFiddle입니다. 스피너는 양식 제출 이벤트에 추가됩니다.
$("form").bind("submit", onFormSubmit);
function onFormSubmit() {
setTimeout(showSpinner, 1);
}
function showSpinner() {
$("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}
답변
이 게시물을 보았고 이미 답변을 받았지만 IE 10에만 해당되는이 문제를 해결하는 데 도움이되는 정보를 게시해야하며 비슷한 문제로이 게시물에 도착하는 다른 사람들에게 도움이 될 수 있다고 생각했습니다.
IE 10에서 애니메이션 GIF가 표시되지 않는 방식에 당황해서이 보석을 발견했습니다.
Tools→ Internet Options→ Advanced→ MultiMedia→Play animations in webpages
도움이 되었기를 바랍니다.
답변
양식 제출이 처리되는 동안 로딩 gif를 표시하려고 할 때이 문제가 발생했습니다. 동일한 제출시 양식이 올바른지 확인하기 위해 유효성 검사기를 실행해야한다는 점에서 재미가 더해졌습니다. 다른 모든 사람과 마찬가지로 (인터넷의 모든 IE / gif 양식 게시물에서) IE에서 로딩 스피너를 “회전”할 수 없었습니다 (제 경우에는 양식을 확인 / 제출). http://www.west-wind.com에 대한 조언을 살펴보면서 ev13wt의 게시물에서 문제가 “… IE가 이미지를 애니메이션으로 렌더링하지 않는 경우 렌더링 할 때 보이지 않습니다. ” 말이 되네요. 그의 해결책 :
gif가 들어갈 위치를 비워두고 JavaScript를 사용하여 onsubmit 함수-document.getElementById ( ‘loadingGif’). src = “gif 파일 경로”에서 소스를 설정합니다.
구현 방법은 다음과 같습니다.
<script type="text/javascript">
function validateForm(form) {
if (isNotEmptyid(form.A)) {
if (isLen4(form.B)) {
if (isNotEmptydt(form.C)) {
if (isNumber(form.D)) {
if (isLen6(form.E)){
if (isNotEmptynum(form.F)) {
if (isLen5(form.G)){
document.getElementById('tabs').style.display = "none";
document.getElementById('dvloader').style.display = "block";
document.getElementById('loadingGif').src = "/images/ajax-loader.gif";
return true;
}
}
}
}
}
}
}
return false;
}
</script>
<form name="payo" action="process" method="post" onsubmit="return validateForm(this)">
<!-- FORM INPUTS... -->
<input type="submit" name="submit" value=" Authorize ">
<div style="display:none" id="dvloader">
<img id="loadingGif" src="" alt="Animated Image that appears during processing of document." />
Working... this process may take several minutes.
</div>
</form>
이것은 모든 브라우저에서 잘 작동했습니다!
답변
여기 내가 한 일이 있습니다. 당신이해야 할 일은 GIF를 분해하여 10 개의 이미지 (이 경우 나는으로 시작 01.gif하고 끝났음 10.gif) 를 말하고 보관할 디렉토리를 지정하는 것입니다.
HTML :
<div id="tester"></div>
자바 스크립트 :
function pad2(number) {
return (number < 10 ? '0' : '') + number
}
var
dirURL = 'path/to/your/images/folder',
ajaxLoader = document.createElement('img');
ajaxLoader.className = 'ajax-image-loader';
jQuery(document).ready(function(){
jQuery('#tester').append(ajaxLoader);
set(0);
});
function set(i) {
if (i > 10) i = 1;
img.src = dirURL + pad2(i) + '.gif';
setTimeout(function() {
set(++i);
}, 100);
}
이 방법은 IE7, IE8 및 IE9에서 작동합니다 (IE9에서는 사용할 수 있다고 생각됨 spin.js).
참고 : 60 년대부터 브라우저를 실행하는 컴퓨터가 없기 때문에 IE6에서 테스트하지 않았습니다. 방법이 너무 간단해서 IE6 이하에서도 작동 할 수 있습니다.
