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：

#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.

会发生什么：

背景的低分辨率版本会快速加载。
同时，较高分辨率的版本正在加载为隐藏图像。
加载高分辨率图像时，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 + ")");
      });
   });

发生了什么：

根据CSS为每个div加载低分辨率图像背景图像设置。（注意，CSS也将div设置为预期的尺寸。）
同时，分辨率越高的照片就越多作为隐藏图像加载（所有共享img_highres的类名）。
每次img_highres照片时都会触发jQuery函数完成加载。
jQuery函数读取图像src路径，和更改相应div的背景图像。在里面上面的例子，命名约定是＆＃34; div_ [name]＆＃34;对于可见的div 和＆＃34; img_ [同名]＆＃34;对于加载的高分辨率图像背景

Answer 3

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

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

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

Answer 4

我通常会使用Grunt或Tiny PNG等在线工具来优化图像，以减小文件大小。

然后您可以选择推迟加载图像，我发现以下文章对延迟图像很有帮助 - https://www.feedthebot.com/pagespeed/defer-images.html

本文讨论了使用base64图像进行初始加载，然后推迟加载高质量图像。文章中提到的图像标记如下......

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

文章中提到的JavaScript如下......

<script type="text/javascript" async>
function init() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i=0; i<imgDefer.length; i++) {
        if(imgDefer[i].getAttribute('data-src')) {
            imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
        }
    }
}
window.onload = init;
</script>

我希望这会有所帮助。

Answer 5

以上所有答案大部分都需要稍作调整，但是这是我认为简短易行的方法。

注意： -取消注释代码即可加载高分辨率图像以供使用，睡眠功能仅用于模拟慢速网络。 -实际上，此方法不会同时加载2个资源（低资源和高资源），但是可以接受，因为低资源不会花费很多时间来加载。 -只需复制整个代码并运行即可进行快速检查。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <style type="text/css">
      
    </style>
  </head>

  <body>
    <!-- Load low res image first -->
    <img style="width: 400px; height: auto;" alt="" src="https://s3-ap-southeast-1.amazonaws.com/wheredat/banner-low-quality/banner_20180725_123048.jpg" onload="upgrade(this)">
  </body>
  
  <script type="text/javascript">

	function upgrade(image){

                // After load low res image, remove onload listener.

		// Remove onload listener.
		$(image).prop("onload", null);

                // Load high resolution image.
                // $(image).attr('src', 'https://s3-ap-southeast-1.amazonaws.com/wheredat/banner/banner_20180725_123048.jpeg');

		// Simulate slow network, after 1.5s, the high res image loads.
		sleep(1500).then(() => {
		    // Do something after the sleep!

			// Load a high resolution image.
			$(image).attr('src', 'https://s3-ap-southeast-1.amazonaws.com/wheredat/banner/banner_20180725_123048.jpeg');
		});	
	}

	// Sleep time expects milliseconds
	function sleep (time) {
	  return new Promise((resolve) => setTimeout(resolve, time));
	}

  </script>
  
</html>

Answer 6

在Ubuntu / Chrome 71上，Milche的答案对我而言并不一致，并且高分辨率图像（通过img src）通常在较低分辨率图像（通过css background）开始之前加载并解析。下载。

我的解决方案是从分辨率较低的图像开始src并使用Image类创建具有高分辨率图像的未附加的<img>实例。加载后，请使用高分辨率图像源更新现有的<img>源。

HTML：

<img id='my-image' src='low-res.png' alt='Title' width='1920px' height='1200px'>

JavaScript：

window.addEventListener('load', function() {
    loadHighResImage(document.getElementById('my-image'), 'high-res.png')
})

function loadHighResImage(elem, highResUrl) {
    let image = new Image()
    image.addEventListener('load', () => elem.src = highResUrl)
    image.src = highResUrl
}

提琴：https://jsfiddle.net/25aqmd67/

这种方法适用于分辨率较低的低分辨率图像。

Answer 7

您是否尝试过使用CSS精灵来帮助您获得所需内容？ http://css-tricks.com/css-sprites/

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

7 个答案: