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

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. Hive on Spark运行环境搭建

    Hive是基于Hadoop的开源数据仓库工具,提供了类似于SQL的HiveQL语言,使得上层的数据分析人员不用知道太多MapReduce的知识就能对存储于Hdfs中的海量数据进行分析.由于这一特性而收 ...

  2. Android Packaging Problem

    android Description Resource Path Location Type Error generating final archive: Debug Certificate ex ...

  3. 【转】ChainMapper 实例理解二

    package com.oncedq.code; import java.io.DataInput; import java.io.DataOutput; import java.io.IOExcep ...

  4. PE安装原版XP系统(含高版本PE安装选项灰色处理办法)

    PE 安装 XP 镜像流程准备原版 XP 安装光盘镜像放到硬盘非 C 盘. 可解压到本地经行安装, 也可以使用虚拟光驱载入安装 (本教程主要讲 PE 内虚拟光驱载入安装) 第一步:用 U 盘或硬盘/光 ...

  5. 國王遊戲（2012年NOIP全国联赛提高组）

    题目描述 Description 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n位大臣排成 ...

  6. linux之pid文件

    在命令行中经常看到*.pid文件 其实这些文件是在启动进程的时候系统给这个进程的master进程分配的进程号 比如/usr/local/nginx/logs/nginx.pid文件 打开这个文件会发现 ...

  7. Visual Studio 2012 离线升级包的制作

    通过CMD执行“VS2012.3.exe/layout”命令,就可以把在线升级的文件保存到本地,这样一来,只要把下载出来的文件打包上传,然后分享出去,所谓的“VS2012 Update 3 离线升级包 ...

  8. C++@sublime GDB调试

    正文转自:http://www.cppblog.com/lucency/archive/2012/08/09/59214.html 之前在网上搜索了好久使用sublime调试C和C++的文章,但是徒劳 ...

  9. HttpWebRequest's Timeout and ReadWriteTimeout — What do these mean for the underlying TCP connection?

    http://stackoverflow.com/questions/7250983/httpwebrequests-timeout-and-readwritetimeout-what-do-thes ...

  10. git 教程 ,常用命令

    Git使用手册 http://www.cnblogs.com/lantingji/p/5942721.html git官网 https://git-scm.com/ Git的奇技淫巧 http://w ...