0

ウィンドウの幅に基づいてファイルからいくつかの html をロードするスクリプトを作成しました。

問題は、いくつかの時点で機能しないことです

var winWidth = $(window).width();
//var winWidth = window.outerWidth;
//var winWidth = document.body.offsetWidth;


    if((winWidth > 0) && (winWidth <= 767)){
        console.log('Mobile');
        $.ajax({
            url : "home-banner-parts/mobile.html",
            dataType: "html",
            success : function (data) {
                $("#homeslider").html(data);
            }
        });
    }
    if((winWidth >= 768) && (winWidth <= 1279)){
        console.log('Tab');
        $.ajax({
            url : "home-banner-parts/tab.html",
            dataType: "html",
            success : function (data) {
                $("#homeslider").html(data);
            }
        });
    }
    if((winWidth >= 1280)){
        console.log('Desktop');
        $.ajax({
            url : "home-banner-parts/desktop.html",
            dataType: "html",
            success : function (data) {
                $("#homeslider").html(data);
            }
        });
    }


//the above code is wrapped in function
$(window).resize(function() {
    console.log('Resizing');
    homeCarousel();
});

だから問題は幅の周りにある

  • 1281px から 1295px - tab.html をロードしますが、sektop.html をロードする必要があります
  • 770px 785px - mobile.html を読み込みますが、tab.html を読み込む必要があります

助けてください

4

2 に答える 2

1

$(window).on('load resize', function() { ... });このコードがページloadのイベント時に実行されるように、すべてをイベ​​ント ハンドラーでラップする必要がありますresize。

$.load()また、読み込みたいものが既にページにある場合に不必要に発砲しないように、どこかで状態を追跡します。

var $body = $('body');

    $(window).on('load resize', function() {
      
      var winWidth = $(this).width(),
          state = $body.data('state');

      console.log(winWidth);

      if ((winWidth > 0) && (winWidth <= 767) && (state != 'mobile')) {
        $body.data('state','mobile');
        console.log('Mobile');
        $.ajax({
          url: "home-banner-parts/mobile.html",
          dataType: "html",
          success: function(data) {
            $("#homeslider").html(data);
          }
        });
      }
      if ((winWidth >= 768) && (winWidth <= 1279) && (state != 'tab')) {
        $body.data('state','tab');
        console.log('Tab');
        $.ajax({
          url: "home-banner-parts/tab.html",
          dataType: "html",
          success: function(data) {
            $("#homeslider").html(data);
          }
        });
      }
      if ((winWidth >= 1280) && (state != 'desktop')) {
        $body.data('state','desktop');
        console.log('Desktop');
        $('bo')
        $.ajax({
          url: "home-banner-parts/desktop.html",
          dataType: "html",
          success: function(data) {
            $("#homeslider").html(data);
          }
        });
      }
    })
body {
overflow-y: scroll;
min-height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

于 2017-04-09T17:36:45.383 に答える