【原】HTML页面元素加载顺序研究报告（2）----背景图片
2、接下来考察背景图片的加载：
一般来说，添加背景图片有三种办法：
- 直接写在标签的style里面，如：
<div style="background-image:url('images/Css.JPG')"></div> - 写在内联的style定义里面，如：
<style>#cssContainer1{background-image: url("images/Css3.JPG");} </style> - 写在外联的css文件里。
其实这三种方法本质是一样的，都是写在了样式表里，而不是直接作为Html页面中的一个元素。那么下面来看看下这种写在样式表里的背景图片和普通img标签里的背景图片加载时有什么不同：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>测试图片加载顺序</title>
</head>
<body><div id="div1"><img src="data:images/Div1.jpg" /></div><div id="div2"><img src="data:images/Div2.jpg" /></div><div id="div3"><img src="data:images/Div3.jpg" /></div><div style="background-image: url('images/Css1.JPG')"></div><div id="div4"><img src="data:images/Div4.jpg" /></div><div id="div5"><img src="data:images/Div5.jpg" /></div><div id="div6"><img src="data:images/Div6.jpg" /></div><div id="div7"><img src="data:images/Div7.jpg" /></div><div id="div8"><img src="data:images/Div8.jpg" /></div><div id="div9"><img src="data:images/Div9.jpg" /></div><div id="div10"><img src="data:images/Div10.jpg" /></div><div id="div11"><img src="data:images/Div11.jpg" /></div><div id="div12"><img src="data:images/Div12.jpg" /></div>
</body>
</html>
IE7+HttpWatch：
FF3.0+FireBug:
可以看到，虽然背景图片所在的div是第四个，但背景图片“imageInCss.JPG” 却是直到最后才被加载。
这段代码会看得更清楚：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>测试图片加载顺序</title><link rel="stylesheet" href="css/style.css" />
</head>
<body><style>#cssContainer1{background-image: url("images/Css1.JPG");}</style><div id="div1"><img src="data:images/Div1.jpg" /></div><div id="div2"><img src="data:images/Div2.jpg" /></div><div id="div3"><img src="data:images/Div3.jpg" /></div><div id="cssContainer1" style="background-image: url('images/Css5.JPG')"><div id="cssContainer2" style="background-image: url('images/Css2.JPG')"></div><div id="cssContainer3" style="background-image: url('images/Css3.JPG')"></div><div id="cssContainer4"></div></div><div id="div4"><img src="data:images/Div4.jpg" /></div><div id="div5"><img src="data:images/Div5.jpg" /></div><div id="div6"><img src="data:images/Div6.jpg" /></div><div id="div7"><img src="data:images/Div7.jpg" /></div><div id="div8"><img src="data:images/Div8.jpg" /></div><div id="div9"><img src="data:images/Div9.jpg" /></div><div id="div10"><img src="data:images/Div10.jpg" /></div><div id="div11"><img src="data:images/Div11.jpg" /></div><div id="div12"><img src="data:images/Div12.jpg" /></div>
</body>
</html>
其中，外联的CSS文件代码是：
#cssContainer4{
background-image:url("../images/Css4.JPG");
}
页面中引入了四个具有背景图片的Div，cssContainer2和cssContainer3的背景图片是通过直接定义的style，cssContainer4的背景图片是通过外联的css文件定义，而cssContainer1的背景图片则通过内联的style和直接定义的style双重声明了。而且cssContainer1这个div包含了其余三个div。测试结果如下：
IE7+HttpWatch：
FF3.0+FireBug:
可以看到，无论何种形式，背景图片都在最后加载。而且它们的的加载顺序是Css5 -> Css2-> Css3 -> Css4，其中被双重定义的另一张背景图片Css1并没有被加载。
那么我们可以得到如下的结论：
- 它们的加载顺序正好与它们所对应的Div的顺序相同，而与它们的style定义放置在Html中的位置无关。这里所说的Div的顺序，以Div的起始标签为准。
- 背景图片最后加载的原因，个人理解，应该是因为其实无论是外联的css文件还是内联的或者直接定义的style，在Html中都会被无差别的视为修饰页面的Style，那么这种修饰当然会放在加载“实际内容”，也就是内嵌在页面中的图片之后才进行。而且按照由外及内，由先到后的顺序依次解析。浏览器会在把所有样式，包括外联的css文件都下载解析完成之后才开始渲染样式，而且会自动忽略会被覆盖的样式表，所以图片Css1由于样式被覆盖，也就不会被下载。
那么这给我们的一个重要启示是：在一个单纯由Html和Css组成的页面中，背景图片总是最后加载的，假若我们想要使用较小的背景图片作为占位符，用于在加载较大的图片或者Flash文件时给用户以提示，大部分时候恐怕是达不到效果的，因为背景图片有时甚至会在大图片或Flash文件加载完成之后才会被加载。
当然，这里一个重要的先决条件就是“单纯由Html和Css组成的页面”，因为JavaScript会对页面元素的加载产生极大影响，而具体情况会在下一节详述。
转载于:https://www.cnblogs.com/smjack/archive/2008/08/21/1272905.html
【原】HTML页面元素加载顺序研究报告（2）----背景图片相关推荐
- 前端性能优化：使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
- selenium web自动化判断页面元素加载完毕
主要方便以后用到时查阅,侵删! 三种等待方法: 1.强制等待sleep(xx) 强制等待,不管你浏览器是否加载完了,程序都得等待,时间一到,继续执行下面的代码,作为调试很有用,有时候也可以在代码里这样 ...
- selenium之如何等待页面元素加载完成
webdriver中我们用两种方式进行等待:明确的等待和隐性的等待. 明确的等待 明确的等待是指在代码进行下一步操作之前等待某一个条件的发生.最不好的情况是使用Thread.sleep()去设置一段确 ...
- 微信公众号群发功能的页面元素加载不全的解决办法
解决了一个困扰我一晚上的问题 昨天晚上突然发现,公众号的群发页面加载出现了点问题,好多内容都不显示.元素深查了一下,发现后台爆了一大堆的错误,主要就是各种元素因为"Refused to lo ...
- html加载时页面闪烁白色背景,解决页面加载闪白问题-背景图片加载优化
页面加载闪白 今天遇到一个问题,写了一个使用深色背景图的网页,发现访问/刷新时,会出现短暂的闪白现象. 之前使用浅色背景时没有发现过这个问题,搜索半天也没有找到特别直白有效的回答. 找到的几个答案,有 ...
- html如何实现页面懒加载,原生JS如何实现图片懒加载
懒加载简介 什么是图片懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时 ...
- 如何使用FF的Firebug组件中的net工具查看页面元素加载消耗时间
1.安装FF的Firebug组件:点击FF的Tools的Add-ons菜单,输入Firebug关键字,并选择合适的版本Install. 2.安装完毕后地址栏右边会出现一个小虫图标,右边还有一个下拉箭头 ...
- 页面的加载与渲染顺序
页面的加载与渲染顺序: 1.一个页面的加载顺序是从上到下顺序加载的,并且加载与渲染同时进行. 2.引用外部js文件时,当在加载过程中遇到标签时,浏览器会向服务器发送一个reques并等待该reques ...
- 关于html和javascript在浏览器中的加载顺序问题的讨论
转自:http://www.cnblogs.com/beyondstorm/archive/2008/09/17/1292940.html 前一阵子横扫了javascript,当时自我感觉良好.现在一 ...
最新文章
- 震惊了！关于JAVA复习的最佳敏捷实践！进BAT就是个毛毛雨！
- 如何使用应用程序库缓存
- 信息系统项目管理师：第9章：项目人力资源管理-章节重点
- EFCore Lazy Loading + Inheritance = 干净的数据表 （一）
- 征稿 | 国际KG大会 IJCKG 2021专辑征文
- 调用kmeans_聚类分析—KMeans
- Python风格总结：遍历技巧
- 5 | Spatial-based GNN/convolution模型之DGC
- 有关 !DOCTYPE HTML
- asp.net中的窗体身份验证（完整篇之三：用户登录页面）
- php网站代码报告,使用Checkstyle报告(来自CodeSniffer)可视化PHP代码
- LeetCode 一题多解 | 53. 最大子数组和：五种解法完全手册
- 如何选择适合你的兴趣爱好（二十七），外语
- 大数据应用案例,告诉你最真实的大数据故事
- 深度分析游戏中的随机概率
- C语言获取股票数据,c/c++开发分享获取贵州茅台2010年1月1号至今的股票交易数据,计算该股票历史数据的5日均线和30日均线...
- 利用网络编程实现TFTP协议
- 计算机重镜像网络文件夹位置,利用备份的Win10映像系统文件还原win10的教程
- MFC实战篇——分页功能
- JAVA知识点-适合自学、面试