刷新后，载入功能不起作用
[英]On load function doesn't work after refresh
问题描述
For some reason, after I refresh website, code in .on('load', function()) doesn't want to work. 
出于某种原因，在刷新网站后，.on（'load'，function（））中的代码不再起作用。 First load is working fine, as intended. 第一次加载按预期工作正常。
That behaviour started to happen when I introduced loader (animation before page full loads). 当我引入加载程序时（页面加载前的动画），该行为开始发生。 Before that everything worked just fine. 在此之前，一切正常。
/* Before page loads */
$( function() {
$('#intro').hide();
});
/* After page loads */
$(window).on('load', function() {
$('.loader').hide();
$('#intro').fadeIn(3200);
includePartials();
slideOutLandingPage();
});
To be specific, problem is that $('#intro').fadeIn(3200); 具体来说，问题在于$('#intro').fadeIn(3200); doesn't happen and $('#intro') still has attribute display: none; 不会发生，并且$('#intro')仍然具有属性display: none; Any idea what might be the reason for that? 知道这可能是什么原因吗？ Any idea how to bypass this? 知道如何绕过这个吗？
HTML: 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>
There are no errors in console. 控制台中没有错误。
To your advice, I have added console.log in several places to check order in which they are called, but everything looks like it should. 根据您的建议，我在几个位置添加了console.log，以检查它们的调用顺序，但是一切看起来都应该如此。
When I delete /* Before page loads */ part it works on refresh just fine, but loader is (obviously) still there after loads. 当我删除/* Before page loads */部分时，它可以在刷新时正常工作，但加载器（显然）在加载之后仍然存在。 Not to mention that my whole structure (formatting) of page goes bad. 更不用说我的页面整体结构（格式）变坏了。
Here's how I put console.logs: 这是我放置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();
});
Since many people wrote in here about document ready - it's not the solution. 由于许多人在这里写过有关文档准备就绪的信息-这不是解决方案。 It must specifically work on load. 它必须专门在负载下工作。
6 个解决方案
解决方案1
2 2018-01-24 10:23:29
I had the same problem with my loader. 我的装载机遇到了同样的问题。
I only used this to make all my container appear after window is loaded (this was my first test) 我只是用它来使我的所有容器在加载窗口后出现（这是我的第一个测试）
$(window).on('load',function() {
// Animate container
$(".container").animate({opacity:1}, 1500);
});
But it worked the when i reload the page, not when I refresh the page. 但是它在我重新加载页面时起作用，而不是在刷新页面时起作用。
I was asking to myself why, but I think I might have the answer... 我在问自己为什么，但我想我可能会有答案。
It's simply because I have this function inside my ready function. 这仅仅是因为我在ready函数中拥有此函数。
$( document ).ready(function() { }
If I separate the two, everything work even when I refresh or reload the page. 如果将两者分开，即使刷新或重新加载页面也可以正常工作。
解决方案2
0 2017-08-03 15:35:34
The problem is because $("#intro").hide() is called after $("#intro").fadeIn() method. 问题是因为$（“＃intro”）。fideIn（）方法之后调用了$（“＃intro”）。hide（）。 You need to remove calling hide method and append display:none property to the #intro element. 您需要删除调用hide方法，并将display：none属性附加到#intro元素。
Something like this. 这样的事情。
<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>
Then this will be working. 这样就可以了。
解决方案3
0 2017-08-03 15:36:03
I mean, it seems to work fine, no? 我的意思是，它似乎工作正常，不是吗？
$(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>
解决方案4
0 2017-08-04 07:48:33
Solution was to set intial display: none in css then remove "before load" actions and add few lines to on.load 解决方案是设置初始display: none 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();
});
Little crude but works. 很少使用，但有效。
解决方案5
-2 2017-08-03 15:21:15
But you are using jQuery, you must be using .ready() instead. 但是，如果您使用的是jQuery，则必须使用.ready（）。
$(document).ready(function(){
$('.loader').hide();
$('#intro').fadeIn(3200);
includePartials();
slideOutLandingPage();
});
解决方案6
-2 2017-08-03 15:28:34
$( function() {是document ready它后触发事件$(window).on('load' 。 http://jsbin.com/siduyovaxi/edit?html,js,console,output
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.