jquery 中的 onload 函数无法刷新
onload function in jquery not working on refresh
我是 jquery 的新手。我有一个简单的项目。两张图片叠在一起。我希望页面首先显示第二张图片(因此页面需要从某个滚动点开始),然后用户可以向上滚动到第一张图片。所以代码会是这样的
html:
!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mainPage" width="100%">
<img id="top" src="pic1.jpg" width="100%">
<img id="bottom" src="pic2.jpg" width="100%">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
JavaScript
window.onload = function() {
scroll(0, 2300);
}
这在我第一次加载页面时有效,但如果我刷新页面则无效(我假设是因为与缓存有关?)。刷新页面时,如何使 onload 功能也起作用?谢谢你的时间。
如果您正在使用 jq
为什么不在 $(document).ready()
上使用这种类型的功能
$(document).ready(function(){
$(window).scrollTop( 3000 );
});
$(window).unload(function(){
$(window).scrollTop( 3000 );
})
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainPage" width="100%">
<img id="top" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
<img id="bottom" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
</div>
load
是页面加载时刻,beforeunload
是刷新页面时刻
$(window).on("load",function() {
scroll(0, 2300);
});
$(window).on("beforeunload",function() {
scroll(0, 2300);
});
因此,如果它是第一次运行,那么您的代码就没问题。但是好像你必须强制删除页面缓存。
试试这个选项:
将此元标记添加到您的头上并试一试。
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
如果想通过js控制缓存的删除,可以尝试做一个简单的js函数:
deleteCache(){
window.location = window.location.href+'?eraseCache=true';
}
我是 jquery 的新手。我有一个简单的项目。两张图片叠在一起。我希望页面首先显示第二张图片(因此页面需要从某个滚动点开始),然后用户可以向上滚动到第一张图片。所以代码会是这样的
html:
!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mainPage" width="100%">
<img id="top" src="pic1.jpg" width="100%">
<img id="bottom" src="pic2.jpg" width="100%">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
JavaScript
window.onload = function() {
scroll(0, 2300);
}
这在我第一次加载页面时有效,但如果我刷新页面则无效(我假设是因为与缓存有关?)。刷新页面时,如何使 onload 功能也起作用?谢谢你的时间。
如果您正在使用 jq
为什么不在 $(document).ready()
$(document).ready(function(){
$(window).scrollTop( 3000 );
});
$(window).unload(function(){
$(window).scrollTop( 3000 );
})
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainPage" width="100%">
<img id="top" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
<img id="bottom" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
</div>
load
是页面加载时刻,beforeunload
是刷新页面时刻
$(window).on("load",function() {
scroll(0, 2300);
});
$(window).on("beforeunload",function() {
scroll(0, 2300);
});
因此,如果它是第一次运行,那么您的代码就没问题。但是好像你必须强制删除页面缓存。
试试这个选项:
将此元标记添加到您的头上并试一试。
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
如果想通过js控制缓存的删除,可以尝试做一个简单的js函数:
deleteCache(){
window.location = window.location.href+'?eraseCache=true';
}