2

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

$(function () {

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

});

而 HTML 只是简单地放在页面中<div id="images-loading"></div>虽然，它不起作用，我也不完全明白为什么。通过不工作，我的意思是，它不会淡出。它只剩下了。我必须说脚本是放置在实际的 ajax 内容本身中，但只有在页面刷新时才会触发。我缺乏自己解决这个问题的经验，所以我很感激任何建议或一些我可以尝试的替代方案。

4

2 回答 2

1

如果您想在本地检查图像加载，您可以遍历所有img元素并检查它们的load事件或使用诸如waitForImages 之类的插件（免责声明：由我编写）。

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

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

$imagesLoading.show();

$("#container").waitForImages(function() {
    $imagesLoading.fadeOut(200);
});
于 2012-09-26T00:42:22.867 回答
0

目前你做错了一些小事：

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

如果您尝试上述方法，它可能会解决您的问题，因为它仅在您强制刷新页面时才有效。但是，您可能会发现，如果图像被缓存在浏览器中，您将看不到加载消息（因为页面加载太快） .. 强制浏览器刷新将清除缓存（在大多数浏览器中）并给出您的消息是时候再次展示了。

于 2012-09-26T01:13:32.453 回答