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

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. 【代码分享】简单html5足球射门游戏分享

    之前空余时间想玩玩html5, 于是使用2.2.2的cocos2d-html5 制作了个简单的足球射门游戏 ,美术是自己在纸上画完用手机拍下再ps扣的图,哈哈,赞一下自己的创意. 在我的主页可以玩这个 ...

  2. 13年7月memory point

    IOS/android美术资源压缩相关工具使用,shell编写; 美术资源地图压缩方案: IAP支付objc代码添加, iap cracker/iap free防破解方法, sever端增加php验证 ...

  3. 在Linux上使用web2py_uwsgi_nginx搭建web服务器

    本文介绍在Linux使用Python+Nginx+web2py+uWSGI搭建一个web服务器的过程. Python 2.7.11 解压安装包 tar -zxvf Python-2.7.11.tgz ...

  4. UVa 11714 - Blind Sorting

    题目题意: 有n个不同的数,你可以询问a,b哪个大,会得到答案,然后问最少要几次保证能挑选出最大和第二大的数. 分析: n个数,先以打擂台的方式,两两比较出最大的,n - 1次,然后在由被最大PK下去 ...

  5. linux 解压命令大全

    .tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) --------------- .gz 解压 ...

  6. ZOJ 1090 The Circumference of the Circle

    原题链接 题目大意:已知三角形的三个顶点坐标,求其外接圆的周长. 解法:刚看到这道题时,马上拿出草稿纸画图,想推导出重心坐标,然后求出半径,再求周长.可是这个过程太复杂了,写到一半就没有兴致了,还是求 ...

  7. POJ-2481 Cows （线段树单点更新）

    题目大意:给n个区间,对于任意一个区间,求出能完全包含它并且长度比它长的区间的个数. 题目分析:将一个区间视为二位坐标系中的一个点,左端点视作横坐标,右端点视作纵坐标.则题目变成了求每个点的左上方.正 ...

  8. Python学习（1）

    幂运算符比取反(一元运算符)的优先级要高. >>>-3**2 -9 >>>(-3)**2 9 >>>pow(2,3) 8 abs函数可以得到数的绝 ...

  9. IOS中调用系统的电话、短信、邮件、浏览功能

    iOS开发系列--通讯录.蓝牙.内购.GameCenter.iCloud.Passbook系统服务开发汇总 2015-01-13 09:16 by KenshinCui, 26990 阅读, 35 评 ...

  10. MySql的FIND_IN_SET()查询函数的使用

    表 table的结构如下: id title 1 12,21 2 21,32 3 45,21,78 4 221,45,74 5 34,421,121 6 52,21,321 现在用sql语句查出来字段 ...