Question

我正在尝试使用3种不同尺寸的图像作为全屏幕背景;一个图像分别用于3种不同的屏幕分辨率。它的工作原理除了初始加载外。

在下面的代码中显示背景图片，但它始终在初始加载时显示screen.availWidth = 1360的图像。如果您导航到另一个页面，它可以正常工作。

也许有些事情没有在$(document).ready准备好。

我一定会感谢你的帮助。

以下是代码：

<head>
    <style>
        #bkgrnddiv {
           min-width:100%;
           min-height:100%;
           margin:0;
           padding:0;
           background-position:center top;
           background-repeat:no-repeat;
           overflow:hidden;
        }

        .bg1280_index{
           background-image:url('img1280/index.jpg');
        }

        .bg1360_index{
           background-image:url('img1360/index.jpg');
        }

        .bg1920_index{
           background-image:url('img1920/index.jpg');
        }
    </style>

    <script type="text/javascript">
      $(document).ready(function(){
          var url = window.location.pathname;   
          var pageName = url.substring(url.lastIndexOf('/') + 1);       
          pageName = pageName.substring(0, pageName.length - 4);

          if(screen.availWidth <= 1280) {
              $('#bkgrnddiv').removeClass("bg1360_" + pageName);   
              $('#bkgrnddiv').removeClass("bg1920_" + pageName);   
              $('#bkgrnddiv').addClass("bg1280_" + pageName);   
          } else {
              if(screen.availWidth <= 1366) {
                  $('#bkgrnddiv').removeClass("bg1280_" + pageName);   
                  $('#bkgrnddiv').removeClass("bg1920_" + pageName);   
                  $('#bkgrnddiv').addClass("bg1360_" + pageName);   
              } else {
                  $('#bkgrnddiv').removeClass("bg1280_" + pageName);   
                  $('#bkgrnddiv').removeClass("bg1360_" + pageName);   
                  $('#bkgrnddiv').addClass("bg1920_" + pageName);   
              }
          }
      });
    </script>

</head>

<body>
    <div id="bkgrnddiv" class="bg1360">
       <!-- content -->
    </div>
</body>

Answer 1

也许考虑使用CSS 3媒体查询解决方案？

@media screen and (max-width: 1280px)
{
   #bkgrnddiv {
       background-image: url('img1280/index.jpg');
   }
}
@media screen and (max-width: 1360px)
{
   #bkgrnddiv {
       background-image: url('img1360/index.jpg');
   }
}
@media screen and (max-width: 1920px)
{
   #bkgrnddiv {
       background-image: url('img1920/index.jpg');
   }
}

Answer 2

问题是我试图从仅包含IP的初始加载中捕获页面名称。所以现在我测试页面名称==空字符串。我还删除了额外的背景课程。

<head> 
    <style> 
        #bkgrnddiv { 
           min-width:100%; 
           min-height:100%; 
           margin:0; 
           padding:0; 
           background-position:center top; 
           background-repeat:no-repeat; 
           overflow:hidden; 
        } 
    </style> 

    <script type="text/javascript"> 
        $(document).ready(function(){
            var url = window.location.pathname;   
            var pName = url.substring(url.lastIndexOf('/') + 1);
            if(pName == ''){
                pName = 'index.php';
            }
            pName = pName.substring(0, pName.length - 4) + ".jpg";

            if(window.screen.availWidth <= 1280) {
                $('#bkgrnddiv').css('backgroundImage', 'url(images1280/' + pName + ')');   
            } else {
                if(window.screen.availWidth <= 1366) {
                    $('#bkgrnddiv').css('backgroundImage', 'url(images1360/' + pName + ')');   
                } else {
                    $('#bkgrnddiv').css('backgroundImage', 'url(images1920/' + pName + ')');   
                }
            }
        });
    </script> 

</head> 

<body> 
    <div id="bkgrnddiv"> 
       <!-- content --> 
    </div> 
</body>

显示基于屏幕分辨率的背景图像几乎可以工作

2 个答案: