Question

在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>

Answer 1

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

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

<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>

为什么函数在ready（）内部，在刷新页面时不能系统地执行？

1 个答案: