Hoạt ảnh GIF trong IE dừng

Có ai biết cách làm cho GIF động tiếp tục được làm động sau khi bạn nhấp vào liên kết hoặc gửi biểu mẫu trên trang của bạn trong IE không? Điều này hoạt động tốt trong các trình duyệt khác.

Cảm ơn.

Giải pháp được chấp nhận không hoạt động đối với tôi.

Sau một số nghiên cứu thêm, tôi đã tìm ra cách giải quyết này và nó thực sự hoạt động.

Đây là ý chính của nó:

function showProgress() {
    var pb = document.getElementById("progressBar");
    pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
    pb.style.display = '';
}

và trong html của bạn:

<input type="submit" value="Submit" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
    <img src="./progress-bar.gif" width="200" height ="40"/>
</div>

Vì vậy, khi biểu mẫu được gửi, <img/>thẻ sẽ được chèn và vì một số lý do, nó không bị ảnh hưởng bởi các vấn đề về hoạt ảnh.

Đã thử nghiệm trên Firefox, ie6, ie7 và ie8.

câu hỏi cũ, nhưng đăng câu này cho những người bạn google:

Spin.js CÓ HOẠT ĐỘNG cho trường hợp sử dụng này: http://fgnass.github.com/spin.js/

IE giả định rằng việc nhấp vào một liên kết báo trước một điều hướng mới, nơi nội dung trang hiện tại sẽ được thay thế. Là một phần của quá trình sửa đổi nó, nó tạm dừng mã tạo hoạt ảnh GIF. Tôi nghi ngờ bạn có thể làm gì về điều này (trừ khi bạn không thực sự điều hướng trong trường hợp đó, hãy sử dụng return false trong sự kiện onclick).

Đây là một jsFiddle hoạt động tốt trên biểu mẫu gửi với method = "post". Spinner được thêm vào sự kiện gửi biểu mẫu.

$("form").bind("submit", onFormSubmit);

function onFormSubmit() {
    setTimeout(showSpinner, 1);
}

function showSpinner() {
    $("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />'));
}

Xem mã jsFiddle tại đây

Kiểm tra nó trong trình duyệt IE của bạn tại đây

Tôi đã xem bài đăng này và trong khi nó đã được trả lời, tôi cảm thấy tôi nên đăng một số thông tin giúp tôi giải quyết vấn đề này cụ thể cho IE 10 và có thể giúp những người khác đến bài đăng này với vấn đề tương tự.

Tôi đã bối rối vì sao ảnh gif động không hiển thị trong IE 10 và sau đó tìm thấy viên ngọc này.

Tools→ Internet Options→ Advanced→ MultiMedia→Play animations in webpages

hi vọng điêu nay co ich.

Tôi gặp sự cố này khi cố gắng hiển thị gif đang tải trong khi gửi biểu mẫu đang được xử lý. Nó có thêm một lớp thú vị ở chỗ cùng một người gửi phải chạy trình xác thực để đảm bảo biểu mẫu là chính xác. Giống như những người khác (trên mọi bài đăng biểu mẫu IE / gif trên internet), tôi không thể làm cho trình quay tải để "quay" trong IE (và trong trường hợp của tôi, xác thực / gửi biểu mẫu). Trong khi xem xét lời khuyên trên http://www.west-wind.com, tôi đã tìm thấy một bài đăng của ev13wt cho rằng vấn đề là "... rằng IE không hiển thị hình ảnh dưới dạng hoạt ảnh vì nó không nhìn thấy khi được hiển thị. " Điều đó có ý nghĩa. Giải pháp của anh ấy:

Để trống nơi gif sẽ chuyển đến và sử dụng JavaScript để đặt nguồn trong hàm gửi đi - document.getElementById ('loadingGif'). Src = "đường dẫn đến tệp gif".

Đây là cách tôi triển khai nó:

<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>

Điều này hoạt động tốt cho tôi trên tất cả các trình duyệt!

Đây là những gì tôi đã làm. Tất cả những gì bạn phải làm là chia nhỏ GIF của mình thành 10 hình ảnh (trong trường hợp này là tôi bắt đầu 01.gifvà kết thúc bằng 10.gif) và chỉ định thư mục bạn lưu giữ chúng.

HTML:

<div id="tester"></div>

JavaScript:

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);    
}

Phương pháp này hoạt động với IE7, IE8 và IE9 (đối với IE9 bạn có thể sử dụng spin.js). LƯU Ý: Tôi chưa kiểm tra điều này trong IE6 vì tôi không có máy nào chạy trình duyệt từ những năm 60, mặc dù phương pháp này rất đơn giản nhưng nó có thể hoạt động ngay cả trong IE6 trở xuống.

Liên quan đến điều này, tôi đã phải tìm một bản sửa lỗi trong đó các gif động được sử dụng làm hình nền để đảm bảo kiểu dáng được giữ cho biểu định kiểu. Một bản sửa lỗi tương tự cũng làm việc cho tôi ở đó ... tập lệnh của tôi giống như thế này (Tôi đang sử dụng jQuery để giúp dễ dàng hơn trong việc tạo kiểu nền được tính toán - cách thực hiện điều đó mà không có jQuery là một chủ đề cho một bài đăng khác):

var spinner = <give me a spinner element>

window.onbeforeunload = function() {
  bg_image = $(spinner).css('background-image');
  spinner.style.backgroundImage = 'none';
  spinner.style.backgroundImage = bg_image;
}

[EDIT] Với thử nghiệm thêm một chút, tôi vừa nhận ra rằng điều này không hoạt động với ảnh nền trong IE8. Tôi đã thử mọi thứ có thể nghĩ ra để khiến IE8 hiển thị ảnh động gif khi tải trang, nhưng có vẻ như không khả thi vào lúc này.

Dựa trên câu trả lời của @danfolkes, điều này phù hợp với tôi trong IE 8 và ASP.NET MVC3.

Trong _Layout.cshtml của chúng tôi

<body style="min-width: 800px">
    <div id="progress">
        <div style="min-height: 200px">
        </div>
        <div id="throbber">
            <img src="..\..\Content\ajax-loader.gif" alt="Progress" style="display: block;
                margin-left: auto; margin-right: auto" />
        </div>
    </div>
    <div id="main">

<<< nội dung tại đây >>> ...

<script type="text/javascript" language="javascript">
    function ShowThrobber() {
        $('#main').hide();
        $('#progress').show();
        // Work around IE bug which freezes gifs
        if (navigator.appName == 'Microsoft Internet Explorer') {
            // Work around IE bug which freezes gifs
            $("#throbber").html('<img src="../../Content/ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto"/>');
         }
</script>
<script type="text/javascript" language="javascript">
    function HideThrobber() {
        $('#main').show();
        $('#progress').hide();
    }
</script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        HideThrobber();
    });
</script>

Và trong các liên kết điều hướng của chúng tôi:

<input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/>

hoặc là

@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })

Tìm thấy giải pháp này tại http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html và nó HOẠT ĐỘNG! Chỉ cần tải lại hình ảnh trước khi cài đặt thành hiển thị. Gọi hàm Javascript sau từ onclick của nút của bạn:

function showLoader()
{
   //*** Reload the image for IE ***
   document.getElementById('loader').src='./images/loader.gif';
   //*** Let's make the image visible ***
   document.getElementById('loader').style.visibility = 'visible';
}

Tôi nhận ra rằng đây là một câu hỏi cũ và đến nay các áp phích ban đầu đều đã tìm ra giải pháp phù hợp với họ, nhưng tôi đã xem xét vấn đề này và nhận thấy rằng các thẻ VML không trở thành nạn nhân của lỗi IE này. GIF động vẫn di chuyển trong quá trình tải trang khi được đặt trên trình duyệt IE bằng thẻ VML.

Lưu ý rằng tôi đã phát hiện VML đầu tiên trước khi đưa ra quyết định sử dụng thẻ VML vì vậy thẻ này đang hoạt động trong FireFox và các trình duyệt khác sử dụng hành vi GIF động bình thường.

Đây là cách tôi giải quyết vấn đề này.

<input class="myExitButton" type="button" value="Click me"  />

<div class="loadingNextPage" style="display:none" >
    <span style="left:-24px; POSITION: relative; WIDTH: 48px; DISPLAY: inline-block; HEIGHT: 48px" class="spinnerImageVml"><?xml:namespace prefix="rvml" ns = "urn:schemas-microsoft-com:vml" /><rvml:group style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; rotation: 1deg" class="rvml" coordsize = "47,47"><rvml:image style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; TOP: 0px; LEFT: 0px" class="rvml" src="/images/loading_gray.gif" coordsize="21600,21600"></rvml:image></rvml:group></span>
    <img class="spinnerImage" src="/images/loading_gray.gif" alt="loading..." />
    <div>Just one moment while we access this information...</div>
</div>

<script language="javascript" type="text/javascript">
    window.LoadProgress = (function (progress, $) {

        var getdialogHeight = function (height) {
            var isIE = navigator.userAgent.toLowerCase().indexOf('msie') > -1;
            if (isIE) {
                return height + 'px';
            }
            return height;
        };

        var isVmlSupported = function () {
            var a = document.body.appendChild(document.createElement('div'));
            a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
            var b = a.firstChild;
            b.style.behavior = "url(#default#VML)";
            var supported = b ? typeof b.adj == "object" : true;
            a.parentNode.removeChild(a);
            return supported;
        };

        var showAnimationDuringPageUnload = function () {
            if (isVmlSupported()) {
                $(".loadingNextPage > .spinnerImage").hide();
            }
            else {
                $(".loadingNextPage > .spinnerImageVml").hide();
            }
        };

        var openLoadingMessage = function () {
            $(".loadingNextPage").dialog({
                modal: true,
                closeOnEscape: true,
                title: 'Please wait...',
                closeText: 'x',
                height: getdialogHeight(200),
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                }
            });
        };

        $('.myExitButton').click(function () {
            openLoadingMessage();
            showAnimationDuringPageUnload();
            window.location.href = 'http://www.stackoverflow.com';
        });


        return progress;
    })(window.LoadProgress || {}, window.jQuery);
</script>

Đương nhiên, điều này dựa vào jQuery, jQueryUI và yêu cầu một số loại GIF động ("/images/loading_gray.gif").

Truy vấn:

$("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />');

Chỉ có một vấn đề tương tự. Những điều này đã làm việc hoàn hảo cho tôi.

$('#myElement').prepend('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />');

$('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />').prependTo('#myElement');

Một ý tưởng khác là sử dụng jQuery's .load (); để tải và sau đó thêm trước hình ảnh.

Hoạt động trong IE 7+

Rất, rất muộn để trả lời câu hỏi này, nhưng tôi vừa phát hiện ra rằng việc sử dụng hình ảnh nền được mã hóa dưới dạng URI base64 trong CSS, thay vì được giữ dưới dạng hình ảnh riêng biệt, tiếp tục hoạt động trong IE8.

Một cách rất dễ dàng là sử dụng jQuery và plugin SimpleModal . Sau đó, khi tôi cần hiển thị gif "đang tải" khi gửi, tôi thực hiện:

$('*').css('cursor','wait');
$.modal("<table style='white-space: nowrap'><tr><td style='white-space: nowrap'><b>Please wait...</b></td><td><img alt='Please wait' src='loader.gif' /></td></tr></table>", {escClose:false} );

Tôi đã gặp vấn đề tương tự, cũng thường xảy ra với các trình duyệt khác như Firefox. Cuối cùng, tôi phát hiện ra rằng việc tạo động một phần tử với gif động bên trong khi gửi biểu mẫu không tạo hoạt ảnh, vì vậy tôi đã phát triển quỹ công việc sau.

1) Tại document.ready(), mỗi MẪU được tìm thấy trong trang, nhận position:relativetài sản và sau đó đối với mỗi MẪU được đính kèm một vô hình DIV.bg-overlay.

2) Sau đó, giả sử rằng mỗi giá trị gửi của trang web của tôi được xác định bởi btn-primarylớp css, một lần nữa tại document.ready(), tôi tìm kiếm các nút này, chuyển đến MẪU mẹ của mỗi cái và tại biểu mẫu gửi, tôi kích showOverlayOnFormExecution(this,true);hoạt chức năng, chuyển nút được nhấp và một boolean chuyển đổi khả năng hiển thị DIV.bg-overlay.

$(document).ready(function() {

  //Append LOADING image to all forms
  $('form').css('position','relative').append('<div class="bg-overlay" style="display:none;"><img src="/images/loading.gif"></div>');

  //At form submit, fires a specific function
  $('form .btn-primary').closest('form').submit(function (e) {
    showOverlayOnFormExecution(this,true);
  });
});

CSS cho DIV.bg-overlaynhư sau:

.bg-overlay
{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:rgba(255,255,255,0.6);
  z-index:100;
}

.bg-overlay img
{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-40px; //my loading images is 80x80 px. This is done to center it horizontally and vertically.
  margin-top:-40px;
  max-width:auto;
  max-height:80px;
}

3) Ở bất kỳ lần gửi biểu mẫu nào, hàm sau được kích hoạt để hiển thị lớp phủ nền nửa trắng trên toàn bộ biểu mẫu (từ chối khả năng tương tác lại với biểu mẫu) và ảnh gif bên trong biểu mẫu (hiển thị trực quan hành động tải).

function showOverlayOnFormExecution(clicked_button, showOrNot) 
{
    if(showOrNot == 1)
    {
        //Add "content" of #bg-overlay_container (copying it) to the confrm that contains clicked button 
        $(clicked_button).closest('form').find('.bg-overlay').show();
    }
    else
        $('form .bg-overlay').hide();
}

Hiển thị gif hoạt ảnh khi gửi biểu mẫu, thay vì thêm nó tại sự kiện này, giải quyết vấn đề "đóng băng hoạt ảnh gif" của các trình duyệt khác nhau (như đã nói, tôi tìm thấy vấn đề này trong IE và Firefox, không phải trong Chrome)