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

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. 重装系统后删除Cygwin文件夹

    1.右键点要删除Cygwin 文件夹,依次选属性-安全-高级-所有者-编辑,将所有者改为你的登录帐户,勾选下方“替换子容器和对象的所有者”. 2.在 属性-安全-高级对话框中选 权限选项卡,点更改权限 ...

  2. native

    源博客:http://blog.csdn.net/jiakw_1981/article/details/3073613 一. 什么是Native Method   简单地讲,一个Native Meth ...

  3. 【题解】【BT】【Leetcode】Populating Next Right Pointers in Each Node

    Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...

  4. sdut 2153 Clockwise (2010年山东省第一届ACM大学生程序设计竞赛)

    题目大意: n个点,第i个点和第i+1个点可以构成向量,问最少删除多少个点可以让构成的向量顺时针旋转或者逆时针旋转. 分析: dp很好想,dp[j][i]表示以向量ji(第j个点到第i个点构成的向量) ...

  5. Codeforces Round #277 (Div. 2) A B C 水 模拟 贪心

    A. Calculating Function time limit per test 1 second memory limit per test 256 megabytes input stand ...

  6. Color Map的生成方法

    /* Return a RGB colour value given a scalar v in the range [vmin,vmax] In this case each colour comp ...

  7. Linux内核编译和运行（转-段玉磊）

    内核获取网站:https://www.kernel.org/pub/linux/kernel/ 步骤如下: 1.打开终端,更改用户权限为root.具体做法是在终端输入sudo su,然后按提示输入密码 ...

  8. IOS中货币高精度要求使用NSDecialNumber、

    float a = 0.01;        int b =99999999;        double c = 0.0;        c = a * b; //如果单纯的使用double会导致数 ...

  9. 安卓应用运营知识：VersionCode和VersionName

    本文转载于:http://blog.sina.com.cn/s/blog_580a227a0101bdzb.html 小米应用商店运营了大概半年了,过程中有喜有泪,我们在运营过程中,发现有的运营和商务 ...

  10. min-height for IE6

    1. className{     min-height:500px;     height:auto !important;     height:500px; }   2. 在做页面布局时遇到了i ...