每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容,这样网站加载得更快。这是真的吗?display:none不加载图像,还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?
当前回答
为了防止获取资源,使用Web Components的<template>元素。
其他回答
不。如果您正在考虑节省手机用户带宽,图像将像往常一样加载,并且仍将使用用户的带宽。你能做的就是使用媒体查询和过滤你想要加载图像的设备。你的图像必须设置为一个div的背景图像等,而不是一个标签,因为图像标签将加载图像,无论屏幕大小和媒体查询设置。
另一种可能是使用<noscript>标记,并将图像放在<noscript>标记中。然后使用javascript删除noscript标签,因为你需要的图像。通过这种方式,您可以使用渐进增强按需加载图像。
使用我写的这个polyfill来读取IE8中<noscript>标签的内容
https://github.com/jameswestgate/noscript-textcontent
如果你让图片成为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!
我们说的是图像不能在手机上加载,对吧?那么如果你只是做一个@media (min-width: 400px){background-image:thing.jpg}
那么,它难道不会只寻找超过一定屏幕宽度的图像吗?
为了防止获取资源,使用Web Components的<template>元素。