1

在 jQuery 中，我在 ready() 中有一个函数，当我在地址栏中按 Enter 时，这个函数就起作用了。

但是，当我多次按刷新时，不会触发该功能。

然后我尝试连续刷新页面 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>
4

1 回答 1

4

在某些情况下，您在图像加载之前应用该逻辑的问题是什么？请记住，文档就绪事件可能会在图像完成加载之前触发（因此还没有大小），这可能会导致您遇到的行为不一致。

在编写代码时，它基本上等同于根本不将其包装在任何事件处理程序中，因为它已经位于页面底部（一件好事）：

<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>
于 2012-04-09T14:18:39.223 回答