1

私はPHP/MySQLを使用してCMSを構築しており、これまでのところjQueryを使用してテーブル列に並べ替えとフィルタリングを追加しています。通常はうまく機能しますが、並べ替え要素とフィルタリング要素が読み込まれない場合があります。これは、ページを手動で更新した場合にのみ発生し（リンクを介してアクセスした場合は発生しません）、たまにしか発生しません。更新する前に数回更新できる場合もあれば、連続して数回更新できる場合もあります。

問題が発生すると、Firebugのコンソールから次のいずれかまたは両方が通知されます。

ReferenceError：jQueryが定義されていません

ReferenceError：$が定義されていません
$（document）.ready（function（）{

（場合によっては：TypeError：$（ "。tablesorter"）。tablesorterは関数ではありません）

すべてが正常に読み込まれると、コンソールは空白になります。

CMSのすべてのページに読み込まれる私のヘッダーファイルは、次のように始まります。

<?php ob_start(); ?>
<!DOCTYPE html>
<html>
<head>
    <meta name="robots" content="noindex">
    <title><?=$pg_title." - ".$site_name;?> | Lucid <?=$ver_num;?></title>
    <link href="/favicon.gif" rel="icon" />
    <link rel="stylesheet" href="css/styles.php" type="text/css" />
    <script src="js/jquery-1.8.3.min.js" async></script>
    <script src="plugins/jquery-tablesorter/js/jquery.tablesorter.min.js" async></script>
    <script src="plugins/jquery-tablesorter/js/jquery.metadata.js" async></script>
    <script src="plugins/jquery-tablesorter/addons/pager/jquery.tablesorter.pager.min.js" async></script>
    <script src="js/picnet.table.filter.min.js" async></script>
</head>

次に、フッターファイルで、さまざまな関数を呼び出します。

 <script async>
    $(document).ready(function(){
        function validateNumber(event) {
            var key = window.event ? event.keyCode : event.which;

            if (event.keyCode == 8 || event.keyCode == 46
             || event.keyCode == 37 || event.keyCode == 39) {
                return true;
            }
            else if ( key < 48 || key > 57 ) {
                return false;
            }
            else return true;
        };
        $('[class=sort-order]').keypress(validateNumber);
        $(".tablesorter").tablesorter({ 
            textExtraction: 'complex'
        }); 
        var options = {
            filterDelay: 100,
            clearFiltersControls: [$('.filter-clear')]
        };
        $('.tablesorter').tableFilter(options);
        $('input:not(.filter)').live("change", function () {
            window.onbeforeunload = function () { return "Your changes have not been saved, if you leave the page you'll lose them" };
        });
    });
</script>
</body>
</html>
<?php 
ob_flush();
?>

これはかなり一般的な問題であることを認識していますが、すべての解決策を試したと思います（ここにリストされているものを含む：JQuery-$は定義されていません）

setTimeoutを使用して、jQuery以外のすべてのスクリプトの読み込みを最大1秒間遅らせてみましたが、役に立ちません。

jQueryがif（jQuery）で定義されているかどうかを確認してみました-常に定義されています。

Firebugの[ネット]タブには、問題が発生したかどうかに関係なく、jQueryファイルのステータスが304NotModifiedであることが示されています。

私がすべてのスペルと構文に問題がないことを私が知る限り、それはほとんどの場合機能することを与えられるべきです。

ローカルではなく外部のWebサイトからjQueryをロードしてみましたが、違いはありません。

リモートサーバーではなく、ローカルでCMSを開発するためにXAMPPを使用していることを指摘しておく必要があります。そのため、Apacheの構成に問題があるのではないかと思いました。次に、すべてをリモートサーバーにアップロードしましたが、問題がさらに悪化していることがわかりました。これは、ページの読み込み速度に関係していることを示しています。おそらく非同期ですか？しかし、スクリプトをロードする前にjQueryがロードされることを確認するために他に何ができるかわかりません...

4

1 に答える 1

5

要素のasync属性は、スクリプトがダウンロードされて評価される前にHTMLの解析が続行される可能性があることを意味します。scriptつまり、後続のスクリプト要素は、評価された前の要素に依存できません。つまり、jQueryがまだロードされていないため、jQueryの後にロードしているjQueryプラグインが失敗します。

具体的には：

<script src="js/jquery-1.8.3.min.js" async></script>

そのスクリプトが必要であることをブラウザに伝えますが、それを待つことはありません。それで：

<script src="plugins/jquery-tablesorter/js/jquery.tablesorter.min.js" async></script>

同じことを言います。これにより競合状態が設定され、これら2つのスクリプト要素の順序がなくなり、2番目の要素が最初に評価されることがあります。2つ目はjQueryを必要とするため、失敗します。

asyncこれを修正するには、属性を削除する必要があります。スクリプトを待たずにページをより速くレンダリングすることが目標である場合は、すべてのスクリプトを最後body（たとえば、直前</body>）に移動します。ただし、これは、イベントハンドラーが接続される前に、ユーザーがページを操作しようとする瞬間などを意味する場合があることに注意してください。

于 2012-12-01T11:36:17.333 に答える