Question

出于某种原因，在刷新网站后，.on（＆＃39; load＆＃39;，function（））中的代码并不想工作。第一次加载正常工作。

当我引入加载器（页面满载之前的动画）时，这种行为开始发生。在此之前一切正常。

/* Before page loads */
$( function() {
  $('#intro').hide(); 
});


/* After page loads */
$(window).on('load', function() {
  $('.loader').hide();
  $('#intro').fadeIn(3200);
  includePartials();
  slideOutLandingPage();
});

具体而言，问题是$('#intro').fadeIn(3200);没有发生且$('#intro')仍有属性display: none; 任何想法可能是什么原因？知道如何绕过这个吗？

HTML：

  <body>
    <div class="loader"></div>
    <div id="intro">
      <div class="title">
        <div class="title-block">
          <h1>Pretty website</h1>
          <h2>Click anywhere!</h2>
        </div>
      </div>
    </div>
    <div id="container">
    ...
    </div>
  </body>
</html>

控制台没有错误。

根据您的建议，我已经在几个地方添加了console.log来检查调用它们的顺序，但是看起来应该是这样。

当我删除/* Before page loads */部分时，它可以正常刷新，但加载器（显然）在加载后仍然存在。更不用说我的整个页面结构（格式化）变坏了。

这是我如何设置console.logs：

$( function() {
  $('#intro').hide(); 
  console.log('Before load');
});


/* After page loads */
$(window).on('load', function() {
  console.log('After load 1');
  $('.loader').hide();
  $('#intro').fadeIn(3200);
  console.log('After load 2');
  includePartials();
  slideOutLandingPage();
});

由于很多人在这里写了关于准备文件的内容 - 它不是解决方案。它必须专门用于加载。

Answer 1

我的装载机遇到了同样的问题。

我只使用它来使窗口加载后显示我的所有容器（这是我的第一次测试）

    $(window).on('load',function() {
        // Animate container
        $(".container").animate({opacity:1}, 1500);
    });

但是当我重新加载页面时，它就起作用了，而不是在刷新页面时。

我问自己为什么，但我想我可能有答案......

这只是因为我在准备好的功能中有这个功能。

$( document ).ready(function() { }

如果我将两者分开，即使刷新或重新加载页面，一切都会正常工作。

Answer 2

问题是因为$（＆＃34; #intro＆＃34;）。hide（）在$（＆＃34; #intro＆＃34;）。fadeIn（）方法之后被调用。您需要删除调用hide方法并将display：none属性附加到#intro元素。

像这样。

<body>
    <div class="loader"></div>
    <div id="intro">
      <div class="title">
        <div class="title-block">
          <h1>Pretty website</h1>
          <h2>Click anywhere!</h2>
        </div>
      </div>
    </div>
    <div id="container">

    </div>
</body>
<style>
    #intro {
        display: none;
    }
</style>
<script>
$(window).on('load', function() {
      $('.loader').hide();
      $('#intro').fadeIn(3200);
      includePartials();
      slideOutLandingPage();
});
</script>

然后这将有效。

Answer 3

我的意思是，似乎工作正常，不是吗？

$(function() {
  $('#intro').hide();
  console.log('Before load');
});


/* After page loads */
$(window).on('load', function() {
  console.log('After load 1');
  $('.loader').hide();
  $('#intro').fadeIn(3200);
  console.log('After load 2');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader"></div>
<div id="intro">
  <div class="title">
    <div class="title-block">
      <h1>Pretty website</h1>
      <h2>Click anywhere!</h2>
    </div>
  </div>
</div>

Answer 4

解决方案是在css中设置初始display: none然后删除“加载前”操作并向on.load添加几行

/* After page loads */
$(window).on('load', function() {
  console.log('After load 1');
  $('.loader').hide();
  $('#intro').css('display','flex').hide().fadeIn(3200);
  console.log('After load 2');
  includePartials();
  slideOutLandingPage();
});

小原油但有效。

Answer 5

但是你使用的是jQuery，你必须使用.ready（）。

$(document).ready(function(){
  $('.loader').hide();
  $('#intro').fadeIn(3200);
  includePartials();
  slideOutLandingPage();
});

Answer 6

$( function() {是在document ready之后触发的$(window).on('load'事件。 http://jsbin.com/siduyovaxi/edit?html,js,console,output

加载功能在刷新后不起作用

6 个答案: