показать фоновое изображение на основе разрешения экрана почти работает - PullRequest
Новая
       0

показать фоновое изображение на основе разрешения экрана почти работает

1 голос
/ 09 сентября 2011

Я пытаюсь использовать 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>

Ответы [ 2 ]

0 голосов
/ 17 сентября 2011

Проблема заключалась в том, что я пытался захватить имя страницы из начальной загрузки, которая содержит только 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>
0 голосов
/ 12 сентября 2011

Может быть, вы решите использовать решение 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');
   }
}
...