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="images/Div1.jpg" /></div>
<div id="div2"><img src="images/Div2.jpg" /></div>
<div id="div3"><img src="images/Div3.jpg" /></div>
<div style="background-image:url('images/Css1.JPG')"></div>
<div id="div4"><img src="images/Div4.jpg" /></div>
<div id="div5"><img src="images/Div5.jpg" /></div>
<div id="div6"><img src="images/Div6.jpg" /></div>
<div id="div7"><img src="images/Div7.jpg" /></div>
<div id="div8"><img src="images/Div8.jpg" /></div>
<div id="div9"><img src="images/Div9.jpg" /></div>
<div id="div10"><img src="images/Div10.jpg" /></div>
<div id="div11"><img src="images/Div11.jpg" /></div>
<div id="div12"><img src="images/Div12.jpg" /></div>
</body>
</html>
在第三张普通加载的图片之后，放置了一个设置背景图片Css.Jpg的div。
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="images/Div1.jpg" /></div>
<div id="div2"><img src="images/Div2.jpg" /></div>
<div id="div3"><img src="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="images/Div4.jpg" /></div>
<div id="div5"><img src="images/Div5.jpg" /></div>
<div id="div6"><img src="images/Div6.jpg" /></div>
<div id="div7"><img src="images/Div7.jpg" /></div>
<div id="div8"><img src="images/Div8.jpg" /></div>
<div id="div9"><img src="images/Div9.jpg" /></div>
<div id="div10"><img src="images/Div10.jpg" /></div>
<div id="div11"><img src="images/Div11.jpg" /></div>
<div id="div12"><img src="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会对页面元素的加载产生极大影响，而具体情况会在下一节详述。
分享到：
相关推荐
微信小程序开发，适用于微信小程序的图片预加载组件wxapp-img-loader-master.zip
自定义控件，实现在winform窗口中点击查询等待时的页面加载遮罩效果，背景半透明，结果返回前被遮罩的控件不可用。 有问题可留言http://blog.csdn.net/quan278905570
本篇文章将详细讲解延迟加载在JavaScript（js）和jQuery中的应用，以及如何实现页面和图片的延迟加载。 一、延迟加载的概念 延迟加载，也称为懒加载（Lazy Loading），是指在需要时才加载资源的技术。这种技术主要...
Web.xml 中的 listener、filter、servlet 加载顺序及其详解 在 Web 应用程序中，web.xml 文件扮演着非常重要的角色，它定义了 Web 应用的结构和配置。其中，listener、filter、servlet 是三个非常重要的概念，它们...
2. **DOM操作**：Document Object Model (DOM) 是HTML和XML文档的结构表示，通过JavaScript可以对DOM进行操作，比如获取或更改页面元素的属性，如设置背景图片。 3. **数组和随机数**：存储多张图片的URL，通常会...
该资源原理说明与博客《异步&同步加载树节点----zTree(一)》相一致。
JAVA GUI 开发---登录界面加载背景图片
200多个加载中gif图片loading动态图片，全是透明背景图。
在网页设计中，页面跳转加载效果是一种提升用户体验的重要手段。它不仅能让用户在等待页面内容加载时有所感知，还能通过动态的视觉呈现增加互动性和趣味性。本篇将深入探讨页面加载效果的相关知识点，包括原理、实现...
在JSP页面中，我们可以使用`<jsp:include>`标签将这个等待元素嵌入到每个需要加载等待的页面中。 ```html <!DOCTYPE html> <html> 加载等待页面 <!-- 引入CSS样式 --> <!-- 加载等待元素 --> ...
此外，JavaScript还可以实现更复杂的加载效果，比如使用定时器模拟进度条加载，或者动态改变背景颜色、图片等。这些效果可以通过修改元素的样式、属性，甚至创建新的元素来实现。 总结一下，JavaScript在页面加载...
图片延迟加载是一种优化网页性能的技术，它通过只加载视口内的图片来减少页面初始化时的数据传输量，提高页面加载速度，提升用户体验。在本场景中，我们关注的是使用jQuery库实现这一功能的jQuery.lazyload插件。 ...
8. **图标和图片**：页面可能使用SVG图标或背景图片来增强视觉效果。SVG图标具有矢量特性，可以无损缩放，而背景图片则可以通过CSS控制大小和位置。 9. **响应式图片**：HTML5引入了srcset和sizes属性，允许图片...
在网页设计中，图片预加载是一项重要的技术，用于优化用户体验，特别是当页面包含大量图片时。"图片预加载 Loading 效果"就是一种在图片实际加载过程中显示动态加载进度（如百分比）的方式，给用户一个视觉反馈，让...
理解`web.xml`的加载顺序和各个节点的作用对于开发和维护高质量的Web应用至关重要。 1. **加载顺序**： - 当应用服务器启动并加载Web应用程序时，首先读取`web.xml`文件。 - 首先解析的是`<context-param>`节点，...
设置页面背景色。 jQuery 代码: $(document.body).css( "background", "black" ); -------------------------------------------------------------------------------- 隐藏一个表单中所有元素。 jQuery ...
4. 图片资源：可能包括加载动画的图片，或者是页面背景图等。 5. 其他可能的文件：如字体文件、图标文件等，取决于具体的设计需求。 使用这些文件，开发者或设计师可以根据自己的需求进行定制，调整颜色、图标、...
加载顺序是指 web.xml 文件中的元素出现的顺序，它对 Web 应用程序的行为产生了重要的影响。加载顺序可以分为四个阶段：context-param、listener、filter 和 servlet。其中，context-param 配置节用于提供应用程序上...
在图片延迟加载中，我们可以利用jQuery选择器找到页面上的图片元素，然后监听滚动事件，当图片进入视口时，动态替换其`src`属性，加载实际的图片URL。 2. **基本原理**： - **数据属性**：首先，将原始的图片`src`...
03-页面加载事件.html