Question

我想根据屏幕的大小来选择和加载我的背景图像，让我更聪明。

使用案例1：我是移动设备，只需要一个小背景图片。
用例2：我是桌面浏览器，可以有任何屏幕尺寸

目前，我正在使用预加载js和css的组合来提供低分辨率的背景图像，然后在加载后将其交换为高分辨率，如下所示：

.bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: grey;
  background-repeat: no-repeat;
  background-image: url('lowres.jpg');

  /* add in some media queries here to choose different lowres cropping etc */
}

.bg.highres {
  background-image: url('highres.jpg');
  /* add in some media queries here to choose different highres cropping etc */
}

#highres-loader {
  display: none;
}

，在我的HTML中：

<div id="highres-loader">
  <img src="highres.jpg" onload="add_highres_class_to_background_image_after_it_loads()">
</div>

<div class="bg"></div>

这允许立即显示低分辨率图像，而高分辨率图像在背景中加载。并且，通过媒体查询，我可以结合上述内容来确保为设备加载正确的bg图像。看起来很棒！

然而，我发现的事情是：1）我无法确定大图像的优先级，以便在网站其余部分完成后必须加载。理想情况下，序列化它会更好。此外，这种方案会使下载的图像数量成倍增加，这是不能令人满意的，我认为即使它们没有被使用。

当我写这个问题时，我在这里得到了一些研究：https://timkadlec.com/2012/04/media-query-asset-downloading-results/看起来我应该考虑到。然而，报告现在已经过时了，所以我不确定今天的研究会发现什么。

Answer 1

我认为您的方法是正确的，但您希望确保在页面可访问后开始加载高分辨率图像。我已经对此进行了大量研究，发现以下是唯一有效的方法。

<script type="text/javascript">
function downloadAtOnload() {
  // Dynamically load CSS
  var ls = document.createElement("link");
  ls.rel="stylesheet";
  ls.href= "css/my-css.css";
  document.getElementsByTagName("head")[0].appendChild(ls);

  // Dynamically load Javascript/jQuery
  element = document.createElement("script");
  element.src = "js/my-js.js";
  document.body.appendChild(element);
}
if (window.addEventListener) window.addEventListener("load", downloadAtOnload, false);
else if (window.attachEvent) window.attachEvent("onload", downloadAtOnload);
else window.onload = downloadAtOnload;
</script>

在my-js.js脚本中，您可以加载高分辨率图像并将其放入正确的容器中。

优化背景图像加载

1 个答案: