每个响应式网站开发教程都建议使用display:none CSS属性来隐藏移动浏览器加载的内容,这样网站加载得更快。这是真的吗?display:none不加载图像,还是在移动浏览器上加载内容?有没有什么方法可以防止在移动浏览器上加载不必要的内容?


当前回答

使用@media query CSS,基本上我们只是发布了一个项目,我们在桌面上有一个巨大的树的图像,但没有显示在桌面/移动屏幕上。所以防止图像加载非常简单

下面是一个小片段:

.tree {
    background: none top left no-repeat; 
}

@media only screen and (min-width: 1200px) {
    .tree {
        background: url(enormous-tree.png) top left no-repeat;
    }
}

你可以使用相同的CSS来显示和隐藏显示/可见/不透明度,但图像仍在加载,这是我们想出的最安全的代码。

其他回答

不。如果您正在考虑节省手机用户带宽,图像将像往常一样加载,并且仍将使用用户的带宽。你能做的就是使用媒体查询和过滤你想要加载图像的设备。你的图像必须设置为一个div的背景图像等,而不是一个标签,因为图像标签将加载图像,无论屏幕大小和媒体查询设置。

另一种可能是使用<noscript>标记,并将图像放在<noscript>标记中。然后使用javascript删除noscript标签,因为你需要的图像。通过这种方式,您可以使用渐进增强按需加载图像。

使用我写的这个polyfill来读取IE8中<noscript>标签的内容

https://github.com/jameswestgate/noscript-textcontent

如果你让图片成为CSS中一个div的背景图片,当这个div被设置为“display: none”时,图片将不会被加载。当CSS被禁用时,它仍然不能加载,因为CSS是禁用的。

是的,它会渲染得更快一点,只是因为它不需要渲染图像,并且在屏幕上少了一个元素来排序。

如果您不想加载它,请将DIV保留为空,以便稍后加载包含<img>标记的html。

尝试使用firebug或wireshark,就像我之前提到的那样,你会看到即使display:none存在,文件也会被传输。

Opera是唯一一个在显示设置为none时不加载图像的浏览器。Opera现在已经转移到webkit,即使它们的显示设置为none,也会渲染所有图像。

这里有一个测试页面可以证明这一点:

http://www.quirksmode.org/css/displayimg.html

使用@media query CSS,基本上我们只是发布了一个项目,我们在桌面上有一个巨大的树的图像,但没有显示在桌面/移动屏幕上。所以防止图像加载非常简单

下面是一个小片段:

.tree {
    background: none top left no-repeat; 
}

@media only screen and (min-width: 1200px) {
    .tree {
        background: url(enormous-tree.png) top left no-repeat;
    }
}

你可以使用相同的CSS来显示和隐藏显示/可见/不透明度,但图像仍在加载,这是我们想出的最安全的代码。