根据屏幕分辨率显示背景图像几乎可以正常工作

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 Queries解决方案？

@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 个解决方案

解决方案1
0 2011-09-12 08:47:13

解决方案2
0 2011-09-17 04:37:08

根据屏幕分辨率显示背景图像几乎可以正常工作

问题描述

2 个解决方案

解决方案1 0 2011-09-12 08:47:13

解决方案2 0 2011-09-17 04:37:08

解决方案1
0 2011-09-12 08:47:13

解决方案2
0 2011-09-17 04:37:08