首先加载低分辨率背景图像，然后加载高分辨率图像

Question

当网站输出到客户端时，我正在尝试优化网站的大小。缓存时，我分别只有1.9MB和29KB。问题在于，第一次加载包含的图像对于移动设备而言并未经过优化。它具有1080p分辨率。

因此，我正在寻找一种方法，该方法允许我首先加载低分辨率版本（min.bg.jpg），一旦网站加载完毕，请使用高分辨率版本-
甚至分辨率接近所用设备的分辨率版本（NNNxNNN.bg.jpg或只是bg.jpg） 。

就像每个人都期望的那样，使用CSS设置背景。它应用于主体，整个语句如下所示：

body {
    background: url("/cdn/theme/images/bg.jpg");
    color: white;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
}

现在，我想将其更改为min.bg.jpg代替第一次加载，然后再执行以下操作：

jQuery(function(){
    jQuery("body").[...]
});

如何异步下载新背景，然后将其作为新CSS背景图像插入？

为了显示一些差异，这是我用于测试的主版本和迷你版本的示例：

[e-mail] ~/Work/BIRD3/cdn/theme/images $ file *.jpg
bg.jpg:     JPEG image data, EXIF standard
min.bg.jpg: JPEG image data, JFIF standard 1.01
[e-mail] ~/Work/BIRD3/cdn/theme/images $ du -h *.jpg
1,0M    bg.jpg
620K    min.bg.jpg

Answer 1

这是我使用的方法

CSS：

#div_whatever {
   position: whatever;
   background-repeat: no-repeat;
   background-position: whatever whatever; 
   background-image: url(dir/image.jpg);
   /* image.jpg is a low-resolution at 30% quality. */
}

#img_highQuality {
    display: none;
}

HTML：

<img id="img_highQuality" src="dir/image.png">
<!-- img.png is a full-resolution image. -->

<div id="div_whatever"></div>

JQUERY：

$("#img_highQuality").off().on("load", function() {
    $("#div_whatever").css({
        "background-image" : "url(dir/image.png)"
    });
});
// Side note: I usually define CSS arrays because
// I inevitably want to go back and add another 
// property at some point.

怎么了：

1. 低分辨率版本的背景会快速加载。
2. 同时，高分辨率版本正在作为隐藏图像加载。
3. 加载高分辨率图像时，jQuery将div的低分辨率图像替换为高分辨率版本。

纯JS版本

此示例对于更改一个到多个元素将非常有效。

CSS：

.hidden {
   display: none;
}

#div_whatever {
   position: whatever;
   background-repeat: no-repeat;
   background-position: whatever whatever; 
   background-image: url(dir/image.jpg);
   /* image.jpg is a low-resolution at 30% quality. */
}

HTML：

<div id="div_whatever"></div>
<img id="img_whatever" class="hidden" src="dir/image.png" onload="upgradeImage(this);">

JAVASCRIPT：

function upgradeImage(object) {
    var id = object.id;
    var target = "div_" + id.substring(4);

    document.getElementById(target).style.backgroundImage = "url(" + object.src + ")";
}

更新/增强（1/31/2017）

此增强功能的灵感来自gdbj的出色之处，即我的解决方案导致在三个位置指定了图像路径。尽管我没有使用gdbj的addClass（）技术，但以下jQuery代码经过修改以提取图像路径（而不是将其硬连线到jQuery代码中）。更重要的是，此版本允许从低分辨率到高分辨率的多个图像替换。

CSS

.img_highres {
  display: none;
}

#div_whatever1 {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(PATH_TO_LOW_RES_PHOTO_1);
}

#div_whatever2 {
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(PATH_TO_LOW_RES_PHOTO_2);
}

HTML

<div id="div_whatever1"></div>
<img id="img_whatever1" class="img_highres" src="PATH_TO_HIGH_RES_PHOTO_1">

<div id="div_whatever2"></div>
<img id="img_whatever2" class="img_highres" src="PATH_TO_HIGH_RES_PHOTO_2">

JQUERY

  $(function() {
      $(".img_highres").off().on("load", function() {
         var id = $(this).attr("id");
         var highres = $(this).attr("src").toString();
         var target = "#div_" + id.substring(4);
         $(target).css("background-image", "url(" + highres + ")");
      });
   });

发生什么事：

1. 根据其div的CSS背景图像设置为每个div加载低分辨率图像。（请注意，CSS还将div设置为预期的尺寸。）
2. 同时，将更高分辨率的照片作为隐藏图像加载（所有共享类名均为img_highres）。
3. 每次img_highres照片完成加载时，都会触发jQuery函数。
4. The jQuery function reads the image src path, and changes the background image of the corresponding div. In the example above, the naming convention is “div_[name]” for the visible divs and “img_[same name]” for the high res images loaded in the background.