0

以下のカスタム関数 (loadContent) を使用すると、問題が発生しました。作業ページ (以下の URL) にアクセスすると、画像の読み込みを待ってからオーバーレイが非表示になります (これは素晴らしいことです!)。作業ページを離れて (プロジェクトにアクセス)、後で作業ページに再度アクセスすると、機能しなくなります。2 番目のページにアクセスすると Firebug が表示され、すべてが適切に読み込まれますが、オーバーレイが消えることはありません。hideOverlay(); の前に何かがぶら下がっているようです。loadContent(); の場合、関数が実行されます。関数は、その尊敬されるページに対して以前に実行されています。

現在の WIP は [編集: URL は削除されました] で確認できます。

マイロード機能

function loadContent(link) {
 var loadUrl = $(link).attr("href");
 showOverlay(function () {
    $('#holder').load(loadUrl, function () {
        var imgcount = $('#holder img').length;
        $('#holder img').load(function () {
            imgcount--; if (imgcount == 0) {
                $('#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

1 に答える 1

1

DOM に存在するイメージに依存するのではなく、イメージのプリロードを使用します。イメージが既にキャッシュされている場合は、バインドする前に load イベントをトリガーする可能性があります。

$('#holder').load(loadUrl, function () {

    var defArr = $("#holder img").map(function(){
        var def = $.Deferred();
        var img = new Image();
        // bind to load event before setting src, very important!
        $(img).load(def.resolve);
        img.src = this.src;
        return def.promise();
    });

    $.when.apply($,defArr).done(function(){
        // hide overlay
    });

});
于 2013-02-14T21:23:47.077 に答える