Javascript window.load的替代方案

我有一个Ajax页面，其中包含一些预加载的大型图像。我觉得需要显示一个带有加载消息的div，然后在加载所有图像时将其淡出。目前我使用以下代码：

$(function () {

    $(window).load(function () {
        $('#images-loading').css({
            visibility: 'hidden'
        })
            .fadeTo(200, function () {
        });
    });

});

---

HTML只是放在页面

中，但它不起作用，我也不完全理解为什么。我的意思是，它不会消失。它只剩下了。我必须说，脚本被放置在实际的ajax内容本身中，但只有在刷新页面时才会触发。我自己没有解决这个问题的经验，所以我非常感谢任何建议或我可以尝试的一些替代方法。

如果您想在本地检查图像加载，您可以遍历所有

img

元素并检查它们的

load

事件，或者使用（免责声明：由我编写）之类的插件

在成功回调中，只需执行

$imagesLoading = $('#images-loading');

$imagesLoading.show();

$("#container").waitForImages(function() {
    $imagesLoading.fadeOut(200);
});

---

目前，您在做一些小错误：

/// this first line basically says run my contents when the DOM is ready
$(function () {
  /// this second line says run my contents when the window is fully loaded
  /// but you are enabling this only after the DOM has loaded. Depending on
  /// the browser these two events can fire in either order so you may find
  /// situations where nothing would happen.
  $(window).load(function () {
    /// then you hide your image div
    $('#images-loading').css({
        visibility: 'hidden'
    })
    /// but then ask it to fade in
        .fadeTo(200, function () {
    });
  });
});

写上述内容的更好方法如下：

/// once the page has fully loaded - i.e. everything including
/// images is ready - then hide our loading message. Set this
/// listener first as it could fire at any time.
$(window).load(function () {
  $('#images-loading').stop().fadeOut(200);
});

/// as soon as the DOM is ready, show our loading message
/// the DOM event should fire before window load
$(function(){
  /// if you are learning it is far better to name your functions
  /// and then reference them where they are needed. It makes things
  /// easier to read.
  function whenFadeIsComplete(){
    alert('fade in complete');
  }
  /// rather than hide with setting style directly, use jQuery's own hide 
  /// function. Better still, use a CSS class directly on your #images-loading
  /// element that implements `display:none;` or `opacity:0;` - this will 
  /// render more quickly than JavaScript and mean you avoid your 
  /// loading div flickering into view before the fade in starts.
  $('#images-loading').hide().fadeTo(200, whenFadeIsComplete);
})

---

如果您尝试上述方法，它可能会解决您的问题，因为只有在您强制刷新页面时，它才能正常工作。但是，您可能会发现，如果图像缓存在浏览器中，您将看不到正在加载的消息（因为页面加载太快）。。强制浏览器刷新将清除缓存（在大多数浏览器中），并给您重新显示邮件的时间。

谢谢您的解释…不幸的是，我仍然没有运气。我想淡出消息的不透明性，或者使用

Visibility:hidden

，以确保删除消息时页面元素不会跳转。我读过关于

.load

的文章，我不知道我是否正确地假设将

window.load

与Ajax一起使用并不能像预期的那样工作，因此我发现自己很迷茫：/不寻常的是，这样一件小事看起来如此困难。为了使您的消息不会影响文档其余部分的流程，我必须这样做（即，当它被移除时，不会四处跳跃）在消息中使用

position:absolute

——这会将其从其他元素的定位计算中去掉。我建议阅读静态、相对和绝对定位之间的差异。我对关于

窗口的第二部分感到困惑。加载
和
ajax
，因为在您的示例中没有提示您使用
ajax
窗口。加载
将在页面上呈现的所有内容在渲染时加载后触发，因此可以用于检测图像加载。我正在使用一个插件来驱动ajax转换，我认为它与ajax API有点不同。我在原始帖子中提到过它，尽管没有r在代码中提到它，我想知道是否有人知道
window.load
周围的简单解决方案，尽管我已经读了一些书，我想我现在明白了为什么它不能正常工作。与其尝试进行大规模的更改，我想我可能不得不在没有这个加载消息的情况下生活，或者将它放在后台，这是我想要的我真的不想这么做。谢谢你的关注。我了解你的插件的功能…但是有必要为一条小消息加载更多的JS吗？@kvill如果你担心包含插件，只需抓取源代码的相关部分并将其包含在内。老实说，我并不特别担心添加插件，只是看起来不寻常这里没有一个更简单的解决方案。感谢您向我展示了这一点，尽管……令人惊讶的是，我实际上得到了它的功能：）目前我已经将加载程序添加到图像容器的背景中，因为图像无论如何都会淡入，加载程序有淡出的错觉。这是一个额外的标记，但嘿…这可能比添加更多的JS要好。