0

.load() メソッドを使用して ajax 呼び出しが行われている間に、ビュー ポート全体に image(div) をオーバーレイしようとしています。読み込みが完了すると、オーバーレイは消えます。ただし、load コールバックを使用しても、画像が読み込まれる前にオーバーレイがフェードアウトします。低速のインターネット接続では、ユーザーは画像が 1 つずつ読み込まれているのを見ることができます。

現在の WIP は次の場所にあります (作業をクリックしてバグを確認してください)。

マイロード機能

function loadContent(link) {
var loadUrl = $(link).attr("href");

showOverlay(function () {
    $('#holder').load(loadUrl, function () {
        $('#content').scrollTop(0)
         hideOverlay();
    })
  });
};

オーバーレイ関数

function showOverlay(callback) {
   $('html').addClass('overlay-visible');
   $('#overlay').fadeIn(500, callback);
};


function hideOverlay(callback) {
  $('html').removeClass('overlay-visible');
  $('#overlay').delay(100).fadeOut(500, callback);
};

これで私を助けることができる人に前もって感謝します!

4

2 に答える 2

1

jQuery の load() メソッドを使用して AJAX ロードを実行すると、次の順序で処理が行われます ( http://api.jquery.com/load/を参照)。

  1. load() は AJAX によって外部 HTML を読み込みます
  2. この HTML が読み込まれると、jQuery オブジェクトのコンテンツが置き換えられます – ここでは $('#loader')
  3. 最後にコールバック関数が呼び出されます

ここでの問題は、HTML に画像が含まれており、その画像がインターネットからダウンロードされることです。したがって、ここでは、コールバックが呼び出されるのとほぼ同時に、上記の #2 の後、画像のダウンロードが開始されます。

その結果、コールバックはほぼ瞬時に行われますが、画像の読み込みには少し時間がかかります。この影響を避けるために、解決策は確かに画像をプリロードすることです。

于 2013-02-13T14:16:57.127 に答える
0 
  var img = new Image();
  var img_src = ''; // your image url here.
  img.onload = function() {
    //operate your div here.
  };
  img.src = img_src;
于 2013-02-13T14:08:13.603 に答える