什么是图像的弃用lowsrc的最佳替代品

What is the best alternative to the deprecated lowsrc for images?

本文关键字：lowsrc 最佳 替代品 图像 什么      更新时间：2023-09-26

我想使用带有img标签的lowsrc，以便在加载较大分辨率图像时首先（并且更快）显示低分辨率图像。

我的高分辨率图像@800KB，低分辨率版本@50KB。

鉴于 lowsrc 已被弃用，并且许多浏览器显然不支持它，我正在寻找一种可以做同样事情的解决方案，最好是使用尽可能少的代码。

有没有很好的替代品来代替lowsrc？

<img src="lowres.jpg" onLoad="this.src='highres.jpg'" width="?" height="?">

这个替代版本显然阻止了 Firefox 中的无限请求循环（感谢评论中的@Ultimater）：

<img src="lowres.jpg" onLoad="this.src='highres.jpg';this.onload=new Function();" width="?" height="?">

定义HTML5的W3C建议列出了过时的、不符合标准的功能，包括lowsrc属性。它的建议是制作一个渐进式JPEG图像，其第一次扫描具有与50 kB图像相同的空间细节级别，其后续扫描在完整的800 kB图像中填充额外的细节。此机制可能要求用户代理使用 HTTP 范围请求来确定相对于图像显示大小检索的数据量，就像它们使用范围请求通过 audio 或 video 元素的源进行查找一样。

我有两个（将来有三个）解决方案：

  1. 纯 CSS。如果加载的所有图像只有一个占位符图像，则有效。只需为那些具有[lowsrc]属性的图像添加背景并指定一些最小高度。

  2. 使用一些JS来设置背景。请参阅 http://codepen.io/anon/pen/yyQdYJ 并正确设置<body onload>。

  3. 前途。目前不工作（2015 年）。与#2类似，但是使用attr（）CSS函数可以将背景设置为[lowsrc]的值。

所有这些解决方案都使用背景，这不允许根据背景的高度指定图像的正确高度。

// Not working yet
img[lowsrc] {
  width: 100%;
  min-height: 10em;
  background-image: attr(lowsrc);
}

他们本可以保持[lowsrc]工作：-/

相关文章：