11

JavaScript を使用して、(サードパーティ ベンダーからの) 外部スクリプトが完全に読み込まれたかどうかを検出する方法はありますか?

問題のスクリプトは、ジョブのリストのマークアップを取得して埋め込むために使用されますが、残念ながら、変数や関数を使用していません。document.write私のページに埋め込まれたすべてのコンテンツを出力するために使用します。

理想的には、外部スクリプトが読み込まれるのを待っている間に何らかの読み込みメッセージを表示し、読み込みに失敗した場合は「申し訳ありませんが、後で確認してください...」というメッセージを表示したいと考えています。

サイトで jQuery を使用していますが、jQuery 呼び出しを行う前にこの外部スクリプトが呼び出されます。

document.write外部スクリプトの内容は次のようになります。

document.write('<div class="jt_job_list">');
document.write("
    <div class=\"jt_job jt_row2\">
        <div class=\"jt_job_position\">
            <a href=\"http://example.com/job.html\">Position Title</a>
        </div>
        <div class=\"jt_job_location\">City, State</div>
        <div class=\"jt_job_company\">Job Company Name</div>
    </div>
");
4

6 に答える 6

5

スクリプト タグはダウンロードをブロックするため、スクリプトに依存するコンテンツが、スクリプトがロードした場所より下にある限り、問題はありません。これは、スクリプトがページの本文にインラインである場合にも当てはまります。

このWebサイトには、これがどのように機能するかの素晴らしい例があります.

スクリプトを非同期でロードしている場合、これは明らかに機能しません。

async または defer 属性のないスクリプトは、ブラウザーがページの解析を続行する前に、すぐに取得されて実行されます。

出典: MDN

于 2012-08-21T15:40:30.357 に答える
2

上記の支援、特に Steve Souders リンクの ngmiceli に感謝します!

おそらく「怠惰な」アプローチを採用し、「読み込み中」メッセージも見送ることにしました。

$(document).ready(function(){
    if ($('.jt_job_list').length === 0){
        $('#job-board').html("<p>We're sorry, but the Job Board isn't currently available. Please try again in a few minutes.</p>");
    };
});

非常に単純ですが、.jt_job_listクラスを持つ要素がdomにあるかどうかを確認しています。そうでない場合は、エラー メッセージを表示します。

于 2012-08-21T18:14:28.340 に答える
2

ページのその後にスクリプト ブロックを配置できます。

<script src="external_script.js"></script>
<script type="text/javascript">
    ExternalScriptHasLoaded();
</script>
于 2012-08-21T15:41:45.367 に答える