jQueryは必要ありませんが、それぞれのコードが破損しています

Question

私はiOS Mobile Safariで自分のページに問題が発生しました。向きが変わるとページがフリーズします。私の機能は$(window).resize();で実行されています。これは、モバイルサファリがポートレート/風景の方向を聞くものです。

私の脳を疲れさせ、必死に試してみた後、return false;を私の機能の.each();セクションに追加しました。オリエンテーション変更が凍結しなくなりました！しかし...

ここで定義した要素の.each();の機能は実行されません。

return false;の追加動作（Mobile Safariのフリーズ防止）を維持しながら、すべての要素に対して機能を実行させるにはどうすればよいですか？

テストサイト：http://brantley.dhut.ch/

はありがとうございました！

はJavaScript：

(function($){ 
$.respond = function(callback) { 

    $(document).ready(function() { 
     dimensions(); 
    }); 

    $(window).load(function() { 
     dimensions(); 
     $('#load').fadeOut('fast', function() { 
      $('.z:first').fadeIn('slow'); 
      $('#status').fadeIn('slow'); 
      $('footer').fadeIn('slow'); 
     }); 
    }); 

    $(window).resize(function() { 
     dimensions(); 
    }); 

    function dimensions() { 
     var i = $('.z'); 
     i.each(function() { 

      var browserWidth = $(window).width(); 
      var imgRatio = ($(this).width()/$(this).height()); 
      var availableHeight = ($(document).height() - $('header').height() - $('#status').height() - $('footer').height() - 80); 
      var browserRatio = (browserWidth/availableHeight); 

      if (imgRatio >= 1) { 
       $(this).addClass('landscape'); 
      } 

      if (browserRatio >=1.5) { 
       $('#container').css('min-height', '360px'); 
      } else { 
       $('#container').css('min-height', '555px'); 
      } 

      if (browserRatio >= imgRatio) { 
       /* landscape */ 
       //$('body').css('background', 'blue'); 
       $(this).height(availableHeight).width('auto').css('margin-top', '0');  
      } else { 
       /* portrait */ 
       //$('body').css('background', 'green'); 
       $(this).width(browserWidth - 40).height('auto').css('margin-top', (availableHeight - $(this).height())/2); 
      } 

      $(this).css('margin-left', (browserWidth - $(this).width())/2); 

     }); 

     return false; 

    }; 

}; 
})(jQuery); 

Answer 1

は、この最適化されたコードを試してみてください。

(function($){ 
    $.respond = function(callback) { 
     var $doc = $(document), 
      $win = $(window), 
      $z, $load, $footer, $header, $status, $container, 
      resizing = false; 

     $doc.ready(function() { 
      $z   = $('.z'); 
      $load  = $('#load'); 
      $footer  = $('footer'); 
      $header  = $('header'); 
      $status  = $('#status'); 
      $container = $('#container'); 

      dimensions(); 
     }); 

     $win.load(function() { 
      dimensions(); 
      $load.fadeOut('fast', function() { 
       $z.filter(':first').fadeIn('slow'); 
       $status.fadeIn('slow'); 
       $footer.fadeIn('slow'); 
      }); 
     }); 

     $win.resize(function() { 
      dimensions(); 
     }); 

     function dimensions() { 
      if(resizing){ 
       return; // break; the function is still running 
      } else{ 
       resizing = true; 
      } 

      var browserWidth = $win.width(), 
       imgRatio  = $this.width()/$this.height(), 
       availableHeight = ($doc.height() - $header.height() - $status.height() - $footer.height() - 80), 
       browserRatio = browserWidth/availableHeight; 

      $z.each(function() { 
       var $this = $(this); 
       if (imgRatio >= 1) { 
        $this.addClass('landscape'); 
       } 

       if (browserRatio >=1.5) { 
        $container.css('min-height', '360px'); 
       } else { 
        $container.css('min-height', '555px'); 
       } 

       if (browserRatio >= imgRatio) { 
        /* landscape */ 
        //$('body').css('background', 'blue'); 
        $this 
         .height(availableHeight) 
         .width('auto') 
         .css('margin-top', '0'); 
       } else { 
        /* portrait */ 
        //$('body').css('background', 'green'); 
        $this 
         .width(browserWidth - 40) 
         .height('auto') 
         .css('margin-top', (availableHeight - $this.height())/2); 
       } 

       $this.css('margin-left', (browserWidth - $this.width())/2); 

      }); 

      resizing = false; 
     }; 
    }; 
})(jQuery); 

Answer 2

return false;あなたは保留中のイベントをキャンセルしている意味、.each()ではなく、イベントハンドラ自体ではありません。

あなたの機能によって別のresizeイベントが発生し、エンドレスループが発生しているとします。

一度ハンドラを実行して、コードを最適化に加えて、あなたが関数から来て、それが動作するはずです知ってグローバルフラグを使用します。

最初の部分：

var _resizeTimer = 0; 
$(window).resize(function() { 
    window.clearTimeout(_resizeTimer); 
    _resizeTimer = window.setTimeout(dimensions, 200); 
}); 

第二部分：

var _insideDimensions = false; 
function dimensions() { 
    if (_insideDimensions) 
     return; 
    var i = $('.z'); 
    _insideDimensions = true; 
    i.each(function() { 
     //..... 
    }); 
    _insideDimensions = false; 
}