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

2

您的代码失败的像素范围指向滚动条宽度。

实际上，您需要使用window.innerWidth来获取实际使用的视口。

所以var winWidth = window.innerWidth;

最后，当 dom 准备好时，您还应该调用您的代码，所以

function handleWindowSize(){
   // your code here
}
$(window).resize(function() {
    console.log('Resizing');
    handleWindowSize();
    homeCarousel();
});
$(document).ready(function(){
    $(window).trigger('resize');
})
于 2017-04-09T17:59:33.773 回答
1

您需要将所有内容包装在$(window).on('load resize', function() { ... });事件处理程序中，以便此代码在页面loads 和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 回答