0

通过使用下面的自定义函数（loadContent），我遇到了障碍。如果我访问工作页面（下面的 URL），它会等待加载图像然后隐藏叠加层（这很棒！）。如果我离开工作页面（访问项目），然后稍后重新访问工作页面，它将不再有效。Firebug 在第二页访问时显示所有内容都已正确加载，但覆盖层永远不会消失。在 hideOverlay(); 之前似乎有东西挂了；如果 loadContent(); 函数被执行 该功能之前已为该受人尊敬的页面运行过。

当前的 WIP 可以在 [edit: URL has been removed] 中找到

我的加载函数

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 中存在的图像，如果它们已经被缓存，它们可能会在绑定之前触发加载事件。

$('#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 回答