Html 在高分辨率图像完全加载后，如何用更好的图像替换低分辨率背景图像？_Html_Css_Background Image_Lazy Loading_Srcset

Html 在高分辨率图像完全加载后，如何用更好的图像替换低分辨率背景图像？

html css

Html 在高分辨率图像完全加载后，如何用更好的图像替换低分辨率背景图像？,html,css,background-image,lazy-loading,srcset,Html,Css,Background Image,Lazy Loading,Srcset,我希望在初始绘制时加载质量非常低的背景图像，然后根据浏览器的宽度使用质量更高的版本替换它这是我的HTML： <div style="background-image: url('data:image/jpeg;base64,[...]');"></div> @media(max-width: 600px) { div { background-image: url(600.jpg) !important} } @media(max-width: 1000px) {

我希望在初始绘制时加载质量非常低的背景图像，然后根据浏览器的宽度使用质量更高的版本替换它

这是我的HTML：

<div style="background-image: url('data:image/jpeg;base64,[...]');"></div>

@media(max-width:  600px) { div { background-image:  url(600.jpg) !important} }
@media(max-width: 1000px) { div { background-image: url(1000.jpg) !important} }
@media(min-width: 1001px) { div { background-image: url(2200.jpg) !important} }

在这里，我用每个屏幕宽度的适当图像覆盖内联规则

不幸的是，一旦加载CSS文件，浏览器就会将占位符base64图像替换为更高质量图像的丑陋部分加载版本

如何等待背景图像完全加载后再将其换入？

编辑：正如下面评论中所回答的，这不是重复的，因为相关的回答不涉及响应图像的大小。

TLDR:
将要加载到CSS中的高分辨率图像定义为“不可见”

在头部预加载图像

<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">

因此，您遇到的不是“加载”问题，而是“渲染”问题。浏览器已经在做它认为您希望它做的事情，即：在“加载”后，或者更准确地说，在DOM中“找到”图像后，将一个图像替换为另一个图像。然后，问题是浏览器遇到（加载）高分辨率图像的时间比能够快速渲染图像的时间要早。基本上，您希望浏览器在能够快速渲染图像时等待加载图像

preload

属性应该有助于解决这一问题，因为它本质上是DOM上的一个请求，上面写着：哟，你肯定很快就会需要它，所以在所有其他事情之前完全抓住它。也就是说，这并不意味着一旦浏览器被告知要显示图像，它就会快速渲染所有内容

因此，如果您真的想双击此按钮，以确保在浏览器投入所有资源在屏幕上渲染之前，替代图像不会取代低分辨率图像，那么您只需将其显式隐藏在视图中，直到其他所有操作完成。您可以使用CSS来实现这一点：

#hi-res {
    visibility: hidden;
}

然后是DOM上的JS：

$(window).load(function(){
    document.getElementById('hi-res').style.visibility='visible';
});

预加载
回想当年，你可以在页面底部使用延迟加载，甚至只是一个简单的JS等待脚本。

但是，我认为解决您的问题的最佳解决方案是使用中指定的

rel=“preload”

预先加载图像

这可以通过预加载CSS文件本身来完成：

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>


JS和CSS预加载示例

或者更简单地说，关于媒体元素本身：

<head>
  <meta charset="utf-8">
  <title>Responsive preload example</title>

  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">

  <link rel="stylesheet" href="main.css">
</head>


响应预加载示例

可能与@caiovisk重复感谢您的链接。不同之处在于，我希望根据分辨率应用不同的图像，而标准的延迟加载库似乎无法解决背景图像的这一问题。只有标准版。你好，谢谢你的回答。如果我进行预加载，这不会阻止在仍然加载时显示高分辨率图像，对吗？我的问题是，只有当高分辨率图像完全加载时，它才应该替换低分辨率图像。我读了你的文章，答案是肯定的和否定的。我将修改我的原始答案，以更好地解决你的确切问题。那是我的错。太好了，谢谢！我已经接受了答案。最后我换了一种方式，使用了一个低质量的srcset和另一个延迟加载的srcset。jQuery的延迟加载插件会等到图像加载后再进行渲染，所以效果很好。非常感谢，不用担心。使用jQuery延迟加载绝对是一个合法的解决方案。想想看，我们总是如此担心在最底层解决问题，以至于我们有时忽略了其他人已经建立的解决方案

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<head>
  <meta charset="utf-8">
  <title>Responsive preload example</title>

  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">

  <link rel="stylesheet" href="main.css">
</head>