每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容,这样网站加载得更快。这是真的吗?display:none不加载图像,还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?
当前回答
如果你让图片成为CSS中一个div的背景图片,当这个div被设置为'display: none'时,图片将不会被加载。
只是在扩展布伦特的解决方案。
对于纯CSS解决方案,您可以执行以下操作,它还可以使img框实际表现为响应式设计设置中的img框(这就是透明png的用途),如果您的设计使用响应式动态调整图像,这尤其有用。
<img style="display: none; height: auto; width:100%; background-image:
url('img/1078x501_1.jpg'); background-size: cover;" class="center-block
visible-lg-block" src="img/400x186_trans.png" alt="pic 1 mofo">
只有在触发与visible-lg-block绑定的媒体查询并且display:none被更改为display:block时,图像才会被加载。透明png用于允许浏览器在流体设计中为<img>块(因此是背景图像)设置适当的高宽比(height: auto;宽度:100%)。
1078/501 = ~2.15 (large screen)
400/186 = ~2.15 (small screen)
所以你最终会得到如下3个不同的视口:
<img style="display: none; height: auto; width:100%; background-image: url('img/1078x501_1.jpg'); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/517x240_1.jpg'); background-size: cover;" class="center-block visible-md-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/400x186_1.jpg'); background-size: cover;" class="center-block visible-sm-block" src="img/400x186_trans.png" alt="pic 1">
在初始加载期间,只有默认的媒体视口大小的图像加载,然后,根据您的视口,图像将动态加载。
没有javascript!
其他回答
怪癖模式:图像和显示:无
当图像有显示时:none或在元素with中 Display:none,浏览器可能会选择在显示之前不下载图像 设置为另一个值。 当您将显示切换为block时,只有Opera才能下载图像。 所有其他浏览器立即下载它。
浏览器似乎仍然下载图像,即使他们直接或间接隐藏的display: none属性。
我发现防止这种情况发生的唯一标准方法是使用img标签的loading属性:
<img src="https://cdn.test/img.jpg" loading="lazy">
除了Safari和Firefox Android,所有最新的浏览器都支持它。
MDN img加载属性规范。
答案不像简单的是或不是那么简单。看看我最近做的一个测试的结果:
在Chrome浏览器:所有8个截图-*图像加载(img 1) 在Firefox中:仅加载当前正在显示的1个截图*图像(img 2)
所以在深入挖掘之后,我发现了这个,这解释了每个浏览器如何处理加载基于css显示的img资产:none;
摘自博客文章:
Chrome and Safari (WebKit): WebKit downloads the file every time except when a background is applied through a non-matching media-query. Firefox: Firefox won't download the image called with background image if the styles are hidden but they will still download assets from img tags. Opera: Like Firefox does, Opera won't load useless background-images. Internet Explorer: IE, like WebKit will download background-images even if they have display: none; Something odd appears with IE6 : Elements with a background-image and display: none set inline won't be downloaded... But they will be if those styles aren't applied inline.
使用display:none with images的技巧是为它们分配一个id。这是不需要很多代码使其工作。下面是一个使用媒体查询和3个样式表的示例。一个用于手机,一个用于平板电脑,一个用于台式机。我有三张图片,手机,平板电脑和台式机的图片。在手机屏幕上只会显示手机的图像,平板电脑只会显示平板电脑的图像,桌面电脑则显示桌面电脑的图像。 下面是一个代码示例,使其工作:
源代码:
<div id="content">
<img id="phone" src="images/phone.png" />
<img id="tablet" src="images/tablet.png" />
<img id="desktop" src="images/desktop.png" />
</div>
不需要媒体查询的手机CSS。是img#手机让它工作:
img#phone {
display: block;
margin: 6em auto 0 auto;
width: 70%;
}
img#tablet {display: none;}
img#desktop {display: none;}
平板css:
@media only screen and (min-width: 641px) {
img#phone {display: none;}
img#tablet {
display: block;
margin: 6em auto 0 auto;
width: 70%;
}
}
和桌面css:
@media only screen and (min-width: 1141px) {
img#tablet {display: none;}
img#desktop {
display: block;
margin: 6em auto 0 auto;
width: 80%;
}
}
祝你好运,并让我知道它是如何为你工作的。
HTML5 <picture>标签将帮助您根据屏幕宽度解析正确的图像来源
显然,在过去的5年里,浏览器的行为并没有太大的变化,许多人仍然会下载隐藏的图像,即使在它们上设置了display: none属性。
尽管有一个媒体查询的解决方案,它只能在图像被设置为CSS背景时才有用。
虽然我认为这个问题只有一个JS解决方案(延迟加载,图片填充等),但似乎有一个很好的纯HTML解决方案是HTML5的开箱即用。
这是<picture>标签。
MDN是这样描述的:
HTML <picture>元素是一个容器,用于为其中包含的特定<img>指定多个<source>元素。浏览器将根据页面的当前布局(图像将出现在框的约束)和它将显示在设备上(例如普通或hiDPI设备)选择最合适的源。
下面是如何使用它:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
背后的逻辑
只有当所有媒体规则都不应用时,浏览器才会加载img标记的源代码。当浏览器不支持<picture>元素时,它将再次回退到显示img标记。
通常,您会将最小的图像作为<img>的源,这样就不会为较大的屏幕加载较重的图像。反之亦然,如果应用了媒体规则,则不会下载<img>的源文件,而是下载相应的<source>标记的url内容。
这里唯一的缺陷是,如果浏览器不支持该元素,它将只加载小图像。 另一方面,在2017年,我们应该以移动优先的方式思考和编码。
在有人太兴奋之前,这里是当前浏览器对<picture>的支持:
桌面浏览器
移动浏览器
关于浏览器支持的更多信息,您可以在can I use。
好的方面是html5please的句子是用一个回退。我个人打算采纳他们的建议。
关于标签的更多信息可以在W3C规范中找到。这里有一个免责声明,我觉得这很重要:
图片元素与看起来相似的视频和音频元素有些不同。虽然它们都包含源元素,但当元素嵌套在图片元素中时,源元素的src属性没有意义,而且资源选择算法是不同的。同样,图片元素本身也不显示任何东西;它只是为它所包含的img元素提供了一个上下文,使它能够从多个url中进行选择。
它说的是,它只帮助你在加载图像时提高性能,通过提供一些上下文。
你仍然可以使用一些CSS魔法来隐藏小设备上的图像:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
因此浏览器不会显示实际的图像,只会下载1x1像素的图像(如果您多次使用它,它可以被缓存)。但是要注意,如果浏览器不支持<picture>标记,即使在桌面屏幕上也不会显示实际图像(因此您肯定需要在那里进行填充备份)。