替代window.load

Question

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

$(function () {

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

});

而且HTML只是放在页面<div id="images-loading"></div>尽管它不起作用，我也不完全理解为什么。 我的意思是，不工作不会消失。 它仍然存在。 我必须说脚本位于实际的Ajax内容本身中，但是仅在刷新页面时才会触发。 我缺乏自己解决此问题的经验，因此我很乐意尝试任何建议或替代方法。

Answer 1

如果要在本地检查是否加载了图像，则可以遍历所有img元素并检查其load事件，或使用诸如waitForImages的插件（免责声明：由我编写）。

在成功回调中，只需执行...

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

$imagesLoading.show();

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

Answer 2

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

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

如果您尝试上述操作，则可能仅在强制刷新页面时才能解决有关此问题的问题。 但是，您可能会发现，如果将图像缓存在浏览器中，则不会看到加载消息（因为页面加载速度太快） ..强制浏览器刷新将清除缓存（在大多数浏览器中）并给出消息时间再次显示。