0

多くのクエリと ajax を含む非常に長いページがあります。これは短縮版です：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" />
<style>
    #holder{position:relative;}
    #waiting{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index:200; padding-top:20%; text-align:center; background:rgba(255, 255, 255, 0.5);}
    #waiting img {width:200px;}

</style>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.json-2.3.min.js"></script>
    <script type="text/javascript" src="scripts/scripts.js"></script>
    <script type="text/javascript"> 

        function showStep3(){
            $('#waiting').show();
            // this is where a ton of jquery including ajax goes
            runQuery();
            $('#waiting').hide();
        }

        $(function(){

            $('#waiting').hide();

        });

    </script>

</head>
<body>
    <div id="holder">
    <div id="waiting"><img src="img/waiting.gif"></div>
        <div id="criteria">
            whole bunch of HTML
        </div>
    </div>
</body>
</html>

「これはajaxを含む大量のjqueryが行くところです」とマークされた領域には、 async:false に設定されたいくつかのajax呼び出しがあります(それが違いを生む場合)。

基本的に、ロード時に「待機中」の div を非表示にしてから、関数 showStep3 を開始するときにそれを表示し、たくさんのことを行い、すべてが完了したら非表示にします。

これは Firefox では期待どおりに機能しますが、chrome や IE9 では機能しません。何か案は？

4

0 に答える 0