jquery - 如何显示加载直到所有图像完全加载？

Question

我有 Prestashop CMS 的电子购物网站。每个产品页面都有很多图片。当用户在所有图像完全加载之前访问页面时，页面的某些部分会落入滚动框。我猜这个问题是因为浏览器首先加载文本然后加载图像。现在我设置 JQuery 加载来解决这个问题，但问题仍然存在。我将加载代码和示例产品页面放在以下位置:

$(window).load(function() {
  $(".loader").fadeOut("10000");
});

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../img/loading2.gif') 50% 50% no-repeat #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader"></div>

这是示例产品页面: ZoodTools

我想更新我的代码，以确保所有图像都已完全加载，然后淡出加载并向用户显示页面。

Answer 1

jQuery

var $loading = $('.loader').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

ajaxStart/Stop 函数将在您进行任何 Ajax 调用时触发。

Source

或

根据对 this question 的回答，向您的 CSS 添加以下内容:

/* Start by setting display:none to hide the loader.*/
.loader {
    display:    none;
    ...
}

/* When the body has the loading class, you turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, your
   loader element will be visible */
body.loading .loader {
    display: block;
}

这里是jQuery:

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading"); },
    ajaxStop: function() { $body.removeClass("loading"); }    
});

只要 ajaxStart/Stop 事件被触发，您就可以将 add/removeClass 事件附加到 body 元素。当 ajax 事件开始时，将“loading”类添加到正文中，当事件完成时，从正文中删除“loading”类。通过这种方式，您可以在 CSS 的帮助下实现相同的效果。