Question

我想为桌面用户使用大型背景图片，为移动用户使用不同的小背景图片。

我找到了这个答案

.img-responsive.mobile {
  display: none;
}

@media only screen and (max-device-width: 480px) {
  .img-responsive {
    display: none;
  }
  .img-responsive.mobile {
    display: block;
  }
}

<div class="row">
    <img src="image\bannerimages\Career.png" class="img-responsive careerpage">
    <img src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile">
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
    ...       
</div>

how-to-display-different-images-in-mobile-and-desktop-devices

此解决方案的问题是它加载了两个图像 - 我只想加载必要的图像。怎么办呢？

Answer 1

使用纯Javascript

的javascript：

<script>
        var screenWidth = screen.width;
        var imgElement = document.createElement("img");
        var imgUrl;

        if(screenWidth < 480) {
            // for mobile devices
            imgUrl = document.createTextNode("url of img 1");
        } else {
            // otherwise
            imgUrl = document.createTextNode("url of img 2");
        }

        var row = document.getElementByClassName("row");
        row.insertBefore(imgElement, row.childNodes[0]);
</script>

HTML：

<div class="row">
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
    ...       
</div>

我认为HTML代码非常清晰，所以我只是描述了javascript代码。首先获取屏幕宽度，然后检查它是否是移动设备或其他设备。然后在创建的元素中插入适当图像的url，最后将其作为div.row元素的第一个元素插入。

使用jQuery也可以更轻松地完成这项工作。

Answer 2

<div class="row">
    <img id="img1" src="image\bannerimages\Career.png" class="img-responsive careerpage">
    <img id="img2" src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile">
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
    ...       
</div> 


var w = window; 
var x = w.innerWidth;

if(x<568){
document.getElementsById('img2');
}
else{
document.getElementsById('img1');
}

不确定没有完整的语法，请尝试这种方式希望它有效）

根据设备显示/加载不同的背景图像

2 个答案: