Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

这是示例产品页面： ZoodTools

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

Answer 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事件开始时，你添加＆＃34; loading＆＃34;类到身体，当事件完成后，你删除＆＃34; loading＆＃34;从身体上课。这样你就可以在CSS的帮助下实现同样的目标。

Answer 2

我建议解决问题＆＃34;页面的某些部分属于滚动框＆＃34; （虽然我并不完全确定你的意思）而不是用装载机覆盖整个页面。

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

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

2 个答案: