Question

如果元素不透明度为0，浏览器会加载元素背景图像吗？

var siHeight = $('button').innerHeight();
var siWidth = $('button').innerWidth();

$('button').on('click', function() {

   var iHeight = $('button').innerHeight();
   var iWidth = $('button').innerWidth();

   alert("On click H x W" + iHeight + " x " + iWidth + " Before click H x W " + siHeight + " x " + siWidth);

});

Answer 1

在Chrome中点击 F12 ，选择过滤器图标并勾选图片。这将显示为当前页面加载的所有图像。

无论CSS规则如何，都会加载像视频和音频等其他媒体的图像。

值得注意的是，您正在隐藏元素可用的技术：

display:none从文档流中删除元素，当您将其设置回display:block

时会导致重排

visibility:hidden将元素保留在文档流中，这意味着当您使用visibility:visible时，它不会导致重排。

Answer 2

是。如果他们重新display: none;

，他们也会加载

Answer 3

是。浏览器会加载元素，但它们是不可见的;你可以用文字选择来测试它

如果容器不透明度为0，则加载背景图像

3 个答案: