Question

我正在尝试将图像（div）覆盖整个视图端口，同时使用.load（）方法进行ajax调用。一旦负载完成，叠加层应逐渐消失。但是，即使使用加载回调，叠加也会在图像加载之前消失。通过较慢的互联网连接，用户可以逐个看到图像加载。

可在以下位置找到当前的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);
};

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

Answer 1

当你使用jQuery的load（）方法进行AJAX加载时，事情按此顺序发生（参见http://api.jquery.com/load/）：

load（）通过AJAX加载外部HTML
加载此HTML后，它将替换jQuery对象的内容 - 此处为$（'＃loader'）
最后调用回调函数

这里的问题是您的HTML包含图像，而这些图像又是从Internet下载的。所以这里你的图像开始在上面＃2之后下载，几乎与调用回调的时间相同。

结果是回调几乎是瞬间的，而图像需要花费一些时间来加载。解决方案确实是预加载图像，以避免这种影响。

Answer 2

我认为如果您预先加载图片，问题就会得到解决。

Preloading images with jQuery

此链接可能有所帮助。

Answer 3

  var img = new Image();
  var img_src = ''; // your image url here.
  img.onload = function() {
    //operate your div here.
  };
  img.src = img_src;

在图像加载之前发生jQuery .load（）回调

3 个答案: