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

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 更轻松地做到这一点。