4

次のアプローチを使用して、Web サイトのコンテンツをプリロードしています。

$(window).load(function(){
    $('#preLoader').hide();
    $('#container').show();
});

これで #container div にすべての Web サイト コンテンツが含まれるようになりました。ボディの背景画像が完全に読み込まれるまで、これを表示したくありません...したがって、背景画像が読み込まれている間、#preLoader div がアニメーション化されたローダー gif とともに表示されます。

問題：

リソースを含むサーバーが利用できないために、常にロードされない要素 (gravatar など) がいくつかあります...そのため$(window).load()、ページのロードが完了していないため、関数は実行されません。利用できず、ローダーを表示し続けます。

ロード関数を実行できるように応答に時間がかかりすぎるリクエストを無視するにはどうすればよいですか - ローダーを非表示にしてコンテンツを表示します。

$(document).ready()背景画像の読み込みが完了するまで待たないため、関数を使用したくありません...

4

2 に答える 2

3

背景画像をプリロードするだけの場合は、次のようにすることができます。

$(document).ready(function() {
    $('#preLoader').show();
    $('#container').hide();

    $('<img>', {src: '/url/of/image.jpg'}).load(function() {
        $('#preLoader').hide();
        $('#container').show();
    }).error(function() {
        // Something went wrong
    });
});

より良い代替手段は、waitForImages プラグインを使用することです。

$(document).ready(function() {
    $('#preLoader').show();
    $('#container').hide();

    $(document).waitForImages(function() {
        $('#preLoader').hide();
        $('#container').show();
    });
});
于 2013-06-12T18:46:17.323 に答える