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

通过使用下面的自定义函数（loadContent），我遇到了一个障碍。如果我访问工作页面（下面的URL），它会等待加载图像，然后隐藏覆盖图（这太棒了！）。如果我离开工作页面（访问一个项目），稍后重新访问工作页面，则不再有效。 Firebug在第二页显示访问一切正常加载，但覆盖层永远不会消失。 hideOverlay（）之前似乎挂起了一些东西。函数被执行，如果loadContent（）;函数先前已经运行了该尊重页面。jQuery .load（）和缓存映像冲突

当前的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); 
};

在此先感谢任何人都可以帮助我！

来源

2013-02-14 user1512126

使用图像预加载而不是依赖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-14 21:23:47

凯文，感谢您花时间帮忙。你可以向我解释'设置src之前绑定到加载事件，非常重要'吗？在1-10的范围内，我可能是jQuery上的5，而且你已经使用了一些对我来说是新的东西。坦白说，这是我第一次看到延期的对象。我是一个正在转向数字的人：/ – user1512126 2013-02-14 22:13:25

基本上，一旦将图像添加到dom后，负载事件就会被触发，这是在您绑定您的负载事件之前。在我的代码中，我将load事件绑定到一个新的图像元素，然后给该图像元素一个src。一旦我给它一个src，它会立即触发加载事件，如果图像被缓存。 – 2013-02-14 22:15:46

好的，谢谢。我被曲解了。我以为你是在暗示我为了加载事件而做了一些事情。非常感谢！ – user1512126 2013-02-14 22:19:04

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

回答

相关问题