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';
}