一直搞不明白，隐藏的元素的背景图，在页面加载时，是否自动加载？

img隐藏时，图片会加载吗？

测试代码如下：

<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>img load</title>

	<style>

	.divImg {background:url(cssImg1.jpg);}

	.divImg {background:url(cssImg2.jpg);}

	.divNullImg {background:url(cssNullImg.jpg);}

	.divImgNone {display:none;}

	.divImgNone {background:url(cssNoneImg1.jpg);}

	.divImgNone div {background:url(cssNoneImg2.jpg);}

	#divNone {background:url(cssNoneImg3.jpg);}

	.divHoverImg:hover {background:url(cssHoverImg1.jpg);}

	</style>

	</head>

<body>

<img src="img.jpg" />

<img src="cssImg2.jpg" />

<img src="ImgNone.jpg" style="display:none;" />

<div id="divNone" style="display:none; background:url(divNoneBack1.jpg);">

<img src="divNoneImg1.jpg" />

<div style="background:url(divNoneBack2.jpg);"></div>

</div>

<input type="button" value="显示隐藏" onclick="document.getElementById('divNone').style.display = 'block';" />

<div class="divImg">

img

</div>

<div class="divImgNone">

<img src="divNoneImg2.jpg" />

img none

<div></div>

<div style="background:url(divNoneBack3.jpg);"></div>

</div>

<div class="divHoverImg">

test Hover

</div>

<script>

var img = new Image();

img.src = 'jsImg.jpg';

document.getElementById('divNone').style.backgroundImage = 'url(jsNoneImg.jpg)';

</script>

</body>

</html>

测试了chrome33 和 IE7 使用Fiddler 监控

测试结果如下：

结果很复杂，IE和chrome下hover样式的背景图，只有鼠标悬浮时才加载。chrome下隐藏的背景不加载，IE下隐藏的背景要加载。

结论chrome：

  • 隐藏的元素及其包含的背景图不会加载(样式隐藏元素的当前背景会加载)。
  • hover的背景图不会加载，当hover时才加载。
  • 隐藏的img或img在隐藏的元素内也会加载。
  • 没有匹配的样式中，包含的背景不会显示。
  • 使用JS给隐藏的元素设置背景图时，会加载背景图。
结论IE：

  • hover的背景图不会加载，当hover时才加载。
  • 没有匹配的样式中，包含的背景不会显示。

测试img在不显示时是否加载？的更多相关文章

  1. 【技巧】easyUI datagrid在隐藏时加载，显示时无法加载出界面

    注意在显示时调用再调用一次resize就可以显示出来 $("#"+datagridId).datagrid("resize");

  2. webpack中dev-server不写contentBase时如何设置可以显示页面并且加载js

    今天学习了dev-server这个配置,中间遇到疑惑,我写了contentBase是可以走通,可以再localhost:8080看到页面并且正确加载bundle.js的,但是这个contentBase ...

  3. 动态链接库知识点总结之三（如何以显示的方式加载DLL）

    总结一下如何显示加载方式加载DLL, 首先,我们新建一个win32项目,选择dll,空项目,再添加一个源文件,一个模块定义文件(.def),具体如下图.(详细方法已经在前两篇文章中讲述,如有不懂,打开 ...

  4. JQuery/JS插件 jsTree加载树，预先加载，初始化时加载前三级节点，当展开第三级节点时 就加载该节点下的所有子节点

    jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...

  5. js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

  6. selenium启动Chrome时，加载用户配置文件

    selenium启动Chrome时,加载用户配置文件   Selenium操作浏览器是不加载任何配置的,网上找了半天,关于Firefox加载配置的多点,Chrome资料很少,下面是关于加载Chrome ...

  7. 基于spring的web项目启动时预加载数据到ServletContext

    1.要在web启动时预加载数据到ServletContext,实现方法有很多,一种比较简单的方案就是: 1)新建一个bean,定义其初始化方法: <bean id="beanId&qu ...

  8. 【WordPress】外网访问WordPress时无法加载样式表CSS

    情况: 阿里云ECS服务器,用WampServer搭建的WordPress站点,服务端自身访问该站点时显示正常,但外网访问时不能加载样式表CSS的问题. 重要的参考: https://www.doub ...

  9. Linux中实现在系统启动时自动加载模块

    下面是以前学习Linux时写的,后来仔细研究rc.sysinit后发现,只需要修改下列地方就可以了,不必这么麻烦的: rc.sysinit中有这样的一段代码: # Load other user-de ...

随机推荐

  1. buildroot mysql

    /******************************************************************** * buildroot mysql * 说明: * 这两天要 ...

  2. 再生核希尔伯特空间(RKHS)在监督学习(SVM)中的应用

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2014/4/10 在网上找到一个讲reproducing kernel的tutorial看了一看,下面介绍一下. 首先 ...

  3. 安装CDH4 (Cloudera Distribution Hadoop)步骤

    安装流程 机器和系统 3台服务器,安装centos 6.4 64bit系统,内存8G,磁盘60G,cpu单核 已配置好静态ip,并配置好/etc/hosts 下载cdh4版本 https://www. ...

  4. 关于C中scanf()函数读取字符串的问题

    #include <stdio.h> int main(void) { ]; scanf("%s", s_name); printf("Hello, %s!\ ...

  5. JavaWeb学习记录（二）——防盗链技术

    public class TestServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpSer ...

  6. Hibernate设置派生属性（formula）

    一.Customer中包含的字段: private static final long serialVersionUID = 1L;    private Integer id;    private ...

  7. Android--解析XML之SAX

    前言 既然要说XML解析,那么先来聊聊什么是XML.XML,可扩展标记语言 (Extensible Markup Language) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义 ...

  8. 课堂所讲整理：HTML--6运算符、类型转换

    1.类型转换: 分为自动转换和强制转换,一般用强制转换. 其他类型转换为整数:parseint(): 其他类型转换为小数:parsefloat(): 判断是否是一个合法的数字类型:isNaN(): 是 ...

  9. PHP-关于$_SERVER

    类似于Nginx中的请求头,所有header,都可以使用 $http_xxx来使用,比如$http_accept,甚至包括自定义的,比如,$http_x_forwarded_host proxy_se ...

  10. C++泛型编程原理

    1.什么是泛型编程前面我们介绍的vector,list,map都是一种数据结构容器,容器本身的存储结构不同,各容器中存在的数据类型也可以不同.但我们在访问这些容器中数据时,拥有相同的方式.这种方式就叫 ...