画面解像度に基づいた背景画像を表示ほとんどの場合

フルスクリーンの背景に3種類のサイズの画像を使用しようとしています。 3つの異なる画面解像度のそれぞれに対して1つの画像。それは最初の負荷を除いて動作します。画面解像度に基づいた背景画像を表示ほとんどの場合

下のコードでは、背景画像が表示されますが、初期ロード時には常に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

「スクリーン」はどこから来ますか？ – Neal

'screen'はビルトインのJSオブジェクトです。違いはありますが、 'screen'の代わりに' window.screen'を使ってみましたか？ –

「画面」に「ウィンドウ」を追加しようとしましたが、違いはありません。 $（document）.readyが初期化された後に#bkgrnddivのdiv宣言でクラスがリセットされている可能性があります。もちろん、div宣言からクラスを削除した場合、背景画像はありません。 – 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

画面解像度に基づいた背景画像を表示ほとんどの場合

答えて

関連する問題