JQuery окно ширины не работает в некоторых точках останова

Question

Я написал скрипт, который загружает 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();
});

Таким образом, проблема приходит ширина

• От 1281 до 1295 пикселей - загружает tab.html, но должен загружать sektop.html
• 770px 785px - загружает mobile.html, но должен загружать tab.html

Пожалуйста помоги

Answer 1

Пиксельный диапазон, в котором ваш код терпит неудачу, указывает на ширину полосы прокрутки.

Действительно, вам нужно использовать window.innerWidth чтобы получить фактическое используемое окно просмотра.

Так var winWidth = window.innerWidth;

Наконец, вы должны также позвонить вам код, когда дом готов, так

function handleWindowSize(){
   // your code here
}
$(window).resize(function() {
    console.log('Resizing');
    handleWindowSize();
    homeCarousel();
});
$(document).ready(function(){
    $(window).trigger('resize');
})

Answer 2

Вы должны обернуть все в $(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>