为什么当我刷新页面时，ready()中的函数没有系统地执行？
为什么当我刷新页面时，ready()中的函数没有系统地执行？
提问于 2012-04-08 09:37:16
在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>回答 1
Stack Overflow用户
回答已采纳
发布于 2012-04-09 22:18:39
在某些情况下，问题是在图像加载之前应用该逻辑吗？请记住，document ready事件可能会在图像加载完成之前触发(因此还没有大小)，这可能会导致您遇到的不一致行为。
在编写代码时，它基本上等同于根本不在任何事件处理程序中包装它，因为它已经位于页面的底部(这是一件好事)：
<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>如果您希望等到图像加载完成后再运行代码，则可以使用窗口的load事件：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10059758
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号