1

jQueryには、ready（）内に関数があり、アドレスバーでEnterキーを押すと、この関数が機能します。

ただし、[更新]を複数回押すと、機能がトリガーされません。

次に、ページを20回続けて更新しようとしましたが、この関数は実際には4回のうち1回しか機能しませんでした。なぜ体系的ではないのですか？

注：私の関数は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>

画像の読み込みが完了するまで待機してコードを実行したい場合は、代わりにウィンドウの 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>
于 2012-04-09T14:18:39.223 に答える