0

我正在尝试在使用 .load() 方法进行 ajax 调用时让图像（div）覆盖整个视口。加载完成后，覆盖应该消失。然而，即使使用加载回调，覆盖在图像加载之前消失。使用较慢的互联网连接，用户可以看到一张一张加载的图像。

当前的 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 包含图像，而这些图像又是从 Internet 下载的。所以在这里你的图像在上面的 #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 回答