Question

通过使用下面的自定义函数（loadContent），我遇到了麻烦。如果我访问工作页面（下面的URL），它会等待加载图像，然后隐藏叠加层（这很棒！）。如果我离开工作页面（访问项目），然后再访问工作页面，它将不再有效。 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);
};

提前感谢任何可以帮助我的人！

Answer 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
    });

});

jQuery .load（）和缓存图像冲突

1 个答案: