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

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. EL 表达式 取值将 < 转成 &1t 问题

    因为用JeeCMS,JeeCMS后台会存入<p></p> 内容到数据库中 用play框架取后台值的时候 用的EL表达式在前台展示 出现将< 转成 &1t HTML ...

  2. 《JS高程》数据类型学习笔记

    认认真真看完了<JavaScript高级程序设计>第3章的基本概念,原来一直不明白的知识点都在这里面啊...T_T...基础真的很重要,很重要,很重要... 现在终于明白了读书的技巧,书读 ...

  3. My97DatePickerBeta 时间选择控件用法

    用法说明:只需要调用一个js<script language="javascript" type="text/javascript" src=" ...

  4. 转：如何理解c和c ++的复杂类型声明

    本文作者girlrong是网易广州社区的C语言版版主,这篇文章被选在精华区.很是不错,不敢独享!据说她乐于助人,虚心诚恳,颇受网友欢迎.只可惜现在已退隐江湖了.在最近学习C语言过程中,了解些前辈大牛的 ...

  5. android中ListView控件&&onItemClick事件中获取listView传递的数据

    http://blog.csdn.net/aben_2005/article/details/6592205 本文转载自:android中ListView控件&&onItemClick ...

  6. leetcode 37 Sudoku Solver java

    求数独,只要求做出一个答案就可以. 刚开始对题意理解错误,以为答案是唯一的, 所以做了很久并没有做出来,发现答案不唯一之后,使用回溯.(还是借鉴了一下别人) public class Solution ...

  7. HDU-1520 Anniversary party（树形DP）

    题目大意:一棵树,每个节点都带权.从中取出一些节点,并且子节点不能与父节点同时取,求能取得的最大值. 题目分析:定义状态dp(u,0/1)表示u点不取/取.则状态转移方程为: dp(u,1)=sum( ...

  8. X64相关文章

    http://www.codemachine.com/article_x64deepdive.html https://software.intel.com/sites/default/files/m ...

  9. 如何在Unity中播放影片

    Unity支援影片貼圖,也就是說可以匯入影片並附加到遊戲物件上,基本上您電腦上的Quick Time播放器能播的,大致上都能播,已知的支援的影片格式有下列幾種:.mov, .mpg, .mpeg, . ...

  10. 最大化 AIX 上的 Java 性能，第 5 部分: 参考资料和结论

    http://www.ibm.com/developerworks/cn/aix/library/es-Javaperf/es-Javaperf5.html 最大化 AIX 上的 Java 性能,第 ...