在 jQuery 中，我在 ready() 中有一个函数，当我在地址栏中按 Enter 时，该函数起作用。
但是，当我多次按 Refresh 时，该功能没有被触发。
然后我尝试连续刷新页面 20 次，但该功能实际上只工作了 4 次。 为什么不系统化？
注意:我的函数使用 CSS 移动图像
提前致谢
编辑:
<html>
<body>
<div id='container' style='width: 60px; height: 95px; overflow: hidden;'>
<img class='pic' id='default_pic' src='http://www.google.com/images/srpr/logo3w.png'>
</div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'>
<script>
$(document).ready(function(){
function shiftPic(photo) {
var photo_width = $(photo).width();
var container_width = $('#container').width();
photo_shift= (container_width - photo_width)/2;
console.log(photo_shift);
$(photo).css('margin-left',photo_shift);
}
shiftPic('#default_pic');
});
</script>
</body>
</html>
最佳答案
在某些情况下，问题是您在图像加载之前应用该逻辑吗？请记住，文档就绪事件可能会在图像完成加载(因此还没有尺寸)之前触发，这可能会导致您遇到不一致的行为。
在编写代码时，它基本上等同于根本不将其包装在任何事件处理程序中，因为它已经位于页面底部(一件好事):
<html>
<body>
<div id='container' style='width: 60px; height: 95px; overflow: hidden;'>
<img class='pic' id='default_pic' src='http://www.google.com/images/srpr/logo3w.png'>
</div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'>
<script>
function shiftPic(photo) {
var photo_width = $(photo).width();
var container_width = $('#container').width();
photo_shift= (container_width - photo_width)/2;
console.log(photo_shift);
$(photo).css('margin-left',photo_shift);
}
shiftPic('#default_pic');
</script>
</body>
</html>
如果您想等到图像加载完成后运行您的代码，您可以改用窗口的加载事件:
<html>
<body>
<div id='container' style='width: 60px; height: 95px; overflow: hidden;'>
<img class='pic' id='default_pic' src='http://www.google.com/images/srpr/logo3w.png'>
</div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'>
<script>
$(window).load(function() {
var photo_width = $(photo).width();
var container_width = $('#container').width();
photo_shift= (container_width - photo_width)/2;
console.log(photo_shift);
$(photo).css('margin-left',photo_shift);
});
</script>
</body>
</html>
或者，您只能等到特定图像完成加载(在真实页面上使用社交共享小部件、分析脚本、Flash 电影、不相关的附加图像等可以将窗口加载事件完全推出的好主意一点):
<html>
<body>
<div id='container' style='width: 60px; height: 95px; overflow: hidden;'>
<img class='pic' id='default_pic' src='http://www.google.com/images/srpr/logo3w.png'>
</div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'>
<script>
$('#default_pic').load(function() {
var photo_width = $(photo).width();
var container_width = $('#container').width();
photo_shift= (container_width - photo_width)/2;
console.log(photo_shift);
$(photo).css('margin-left',photo_shift);
});
</script>
</body>
</html>
关于javascript - 为什么ready()里面的函数，刷新页面的时候不系统执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10059758/