show background-image based on screen resolution almost works
I'm trying to use 3 different size images for a full-screen background; one image for each of 3 different screen resolutions. It works except on initial load.
In the code below the background image displays, but it always shows the image for screen.availWidth = 1360 on initial load. If you nav to another page it works fine.
Maybe some things don't get prepared in $(document).ready.
I'd sure appreciate any help with this.
Here's the code:
<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').remov开发者_JAVA百科eClass("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>
Maybe consider using a CSS 3 Media Queries solution?
@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');
}
}
The problem was that I was trying to capture the page name from the initial load which only contains the IP. So now I test for page name == empty string. I also eliminated the additional background classes.
<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>
加载中,请稍侯......
精彩评论