顯示基於屏幕分辨率的背景圖像幾乎可以工作

我正在嘗試使用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>

來源

2011-09-09 fuey

'screen'從哪裏來？ – Neal

'screen'是一個內置的JS對象。不是說它應該有所作爲，但是你是否嘗試過使用'window.screen'而不是'screen'？ –

我嘗試在「屏幕」中添加「窗口」，但沒有區別。我想也許這個類是在$（document）.ready初始化之後在#bkgrnddiv的div聲明中重置的。當然，如果我從div聲明中刪除類，那麼沒有背景圖像onload。 – fuey

也許可以考慮使用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'); 
    } 
}

來源

2011-09-12 08:47:13 rkusa

問題是我試圖從只包含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>

來源

2011-09-17 04:37:08 fuey

顯示基於屏幕分辨率的背景圖像幾乎可以工作

回答

相關問題