如何在所有图像完全加载之前显示加载？答案

【问题标题】：How to display loading until all images load completely?如何在所有图像完全加载之前显示加载？
【发布时间】：2017-11-21 09:54:32
【问题描述】：

我有 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

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

【问题讨论】：

我昨天也遇到了同样的问题。我设法用window.onload = function() ... 修复它，把它放在开始的正文标签之后。我的意思是而不是$(window).load(function() ...。
你可以试试我的方法，设置默认状态 div .loader 是可见的，在$(document).ready(function(){ })（jquery 风格）或window.onload = function(){}（纯javascript 风格）调用@987654330 @ 功能！希望这能有所帮助！

标签： jquery html css prestashop

【解决方案1】：

jQuery

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

只要您执行任何 Ajax 调用，ajaxStart/Stop 函数就会触发。

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 事件开始时，您将“加载”类添加到正文中，当事件完成时，您从正文中删除“加载”类。通过这种方式，您可以在 CSS 的帮助下实现相同的目标。

【讨论】：

【解决方案2】：

我建议解决“页面的某些部分落入滚动框”的问题（虽然我不太确定您的意思），而不是用加载器覆盖整个页面。

尝试延迟加载您的图像 - 我使用过 lazyloadxt 并且效果很好，但还有许多其他选择。这应该可以解决页面元素在加载图像时改变位置的问题（如果我理解正确，这就是根本问题），同时仍然为连接速度慢的客户提供一些有关您的产品的信息。

【讨论】：