Question

我正在开发一个Website（PHP / Wordpress），它具有全屏背景图像。我总是遇到背景图片的问题，我给出了计算用户观看的屏幕/窗口高度的高度Jquery Code。它需要一段时间才能加载，当您在浏览器中单击刷新或单击任何链接时，您可以看到底部div。我可以为这些非旋转器使用任何页面过渡，或者在页面加载或刷新时加载一些我可以淡入的内容或向上或向下滑动，或者我还应该做些什么。如何隐藏用户的所有这些加载问题？

Answer 1

在你的WP主题标题中，开始<div>换行：

<div class="pageLoad">

你可以在WP主题页脚中结束它

</div>

您可以使用Font Awesome微调器作为加载器。在pageLoad div之后的WP Theme Header中添加微调器

<div class="buffer">
  <i class="fa fa-spinner fa-pulse"></i>
</div>

在微调器之后创建另一个<div>，它将再次在你的WP主题标题中开始并以你的WP页脚（或你想要加载的任何地方）结束

<div class="body">

<!-- put rest of page content, photos, etc here -->

</div>

然后对于jQuery，您将计算所有图像，一旦它们完成加载，它将隐藏微调器并显示内容：

var imgs = $(".pageLoad img")
var count = imgs.length;

$('.body').hide();

imgs.load(function() {
  count--;
  if (!count) {
        $('.body').show();
      $('.buffer').hide();
   }
}).filter(function() {
  return this.complete;
}).load();

<强> jsfiddle demo

您必须使用背景图片进行测试，但这应该足以让您开始使用。

刷新浏览器或点击任何链接时，底部内容会跳起来

1 个答案: