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

【问题标题】：Display/Load Different Background Image Depending on Device根据设备显示/加载不同的背景图像
【发布时间】：2018-04-21 15:59:40
【问题描述】：

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

我找到了这个答案

.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

此解决方案的问题是它加载了两个图像 - 我只想加载必要的图像。如何做到这一点？

【问题讨论】：

使用背景图片代替img标签
如果您需要不同大小的 img 标签，请使用 srcset。浏览器将为设备选择最佳图像。
你也可以通过在 css 中使用 media-queries 和 background-image 来实现它
@JonathanNicol srcset 绝对是一个很好的答案，而 src 作为 IE 的后备。谢谢！

标签： javascript html css

【解决方案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 更轻松地做到这一点。

【讨论】：

我注意到代码还应该包含事件检查，如果 x 在场景“如果我将在桌面上调整浏览器窗口的大小”中发生变化
@hodiecode 创建一个函数，将代码放入其中。在始终为真的 while 循环中运行函数。
x 我的意思是 screenWidth 的效果会令 xD 吃惊，抱歉 ;]
我的答案是 window.addEventListener('resize', function () { var screenWidth = screen.width; ... row.insertBefore(imgElement, row.childNodes[0]); }) 加上检查已经在行中的 img 是否具有不同的值

【解决方案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');
}

不确定没有完整的语法，试试这个方法希望它有效）

【讨论】：