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

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背景图像插入？

为了显示一些差异,这里是我用于测试的主要和迷你版本的示例:

Ingwie@Ingwies-Macbook-Pro.local ~/Work/BIRD3/cdn/theme/images $ file *.jpg
bg.jpg:     JPEG image data, EXIF standard
min.bg.jpg: JPEG image data, JFIF standard 1.01
Ingwie@Ingwies-Macbook-Pro.local ~/Work/BIRD3/cdn/theme/images $ du -h *.jpg
1,0M    bg.jpg
620K    min.bg.jpg

Answer 1

我们试试一个基本的:

<img border="0" 
     style="background:url(http://i.stack.imgur.com/zWfJ5.jpg) no-repeat; 
            width:1920px;
            height:1200px"
     src="http://i.stack.imgur.com/XOYra.jpg" width="1920" height="1200" />

zWfJ5.jpg是低分辨率版本,XOYra.jpg是高分辨率版本.

如果有办法安排加载,那么首先显示背景图像,这可能是我能想到的最简单的.

低分辨率44k:

高分辨率为1.16M

结果:

jsFiddled here(这需要一个更大的图像来加载比较.)

Answer 2

有点晚了,但你可以使用这个非常简单的解决方案:你可以将两个图像放在css背景中:

  background-image: url("high-res.jpg"),url("low-res.jpg");

浏览器将显示低分辨率图像,然后在加载时显示低分辨率的高分辨率.

Answer 3

这是我用的方法......

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的低分辨率图像.

PURE JS VERSION

这个例子对于改变一个元素到多个元素是有效的.

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. 基于CSS背景图像设置为每个div加载低分辨率图像.(请注意,CSS还会将div设置为预期的尺寸.)
2. 同时,较高分辨率的照片被加载为隐藏图像(所有人都共享一个img_highres的类名).
3. 每次img_highres照片完成加载时都会触发jQuery函数.
4. jQuery函数读取图像src路径,并更改相应div的背景图像.在上面的示例中,命名约定是可见div的"div_ [name]"和后台加载的高分辨率图像的"img_ [same name]".