Question

회 전자 GIF가 포함 된 jQuery UI 대화 상자를 표시하려고했습니다. 원래 HTML에 정적으로 코딩 된 GIF : GIF 이미지를 방지 IE에서

<div id="LoadingDiv" style="display:none; text-align: center"> 
    <img alt="Loading..." src='/Content/images/ajax-loader.gif' /> 
</div> 

그러나이 알려져 문제가 jQuery를 UI 대화 상자에서 올바르게 애니메이션합니다. 그래서 동적으로 div 요소에 img 요소를 추가 할 의지 한 :

$("#FilterForm").submit(function(){ 
    $("#LoadingDiv").html($("<img>").attr({ 
     'id':'spinner', 
     'alt':'Loading...', 
     'src': '@Url.Content("~/Content/images/ajax-loader.gif")' 
    })); 
    $("#LoadingDiv").dialog("open"); 
}); 

이

시스템에 이상한 버그를 만들었습니다. 양식이 제출되면 때로는 GIF가 표시되고 그렇지 않은 경우도 있습니다. 누군가 도울 수 있습니까?

Answer 1

Spin.js을 사용하여 문제를 해결하면 해결됩니다. GIF가 필요없고 브라우저 간 호환성이 향상되었습니다.

코드 :

$("#FilterForm").submit(function(){ 
    var opts = { 
     top: '10px', 
     left: '50px', 
     length: 2, 
     width: 3, 
     radius: 7 
    }; 
    var loadingDiv = document.getElementById("LoadingDiv"); 
    var spinner = new Spinner(opts).spin(loadingDiv); 

    $("#LoadingDiv").dialog("open"); 
});