测试css下图片是何时加载的。
测试结论
以下样式图片在页面加载时就加载
内嵌样式<div style="background-image:url(image.aspx?from=page);">
内嵌样式表 .divCur{background-image:url(image.aspx?from=style1);}
当 存在两个
.divCur{background-image:url(image.aspx?from=style1);}
.divCur{background-image:url(image.aspx?from=style2);}
则只第二个图片会被加载
外部样式表 <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 中可用的样式
以下样式在不同条件下触发
使用JS修改样式，修改后即加载图片。
<input type="button" value="js修改样式" onclick="document.getElementById('div1').style.backgroundImage = 'url(image.aspx?from=js)';" />
使用JS修改ID，id对应样式起效
#body1 {background-image:url(image.aspx?from=idstyle);}
<input type="button" value="设置body Id" onclick="document.body.id = 'body1';" />
当 .divTest:hover{background-image:url(image.aspx?from=hover);} 触发hover时才加载图片
同理 a:active{background-image:url(image.aspx?from=Aactive);} 在点击时加载图片
图片被加载后，使用<input type="button" value="js设置img" onclick="document.getElementById('img1').src = 'image.aspx?from=page';" />
再次加载同一图片时，不会触发。
在页面使用JS嵌入样式
<input type="button" value="输出页面A:active样式" onclick="loadStyle();" />
function loadStyle()
{
var divStyle = document.getElementById('divStyle');
var style = '.<style type="text/css">a:active{background-image:url(image.aspx?from=htmlAactive);}</style>';
divStyle.innerHTML = style;
alert(divStyle.innerHTML);
}
注意IE下必须在<style></style>标签外包含其他字符。样式才有效。
测试方法
设置background-image:url(image.aspx?from=xxx); 当请求到image.aspx时，后台页面触发。就知道是谁什么时候请求的。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<title>样式加载测试</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
div{500px; margin:20px 0px; height:100px; border:solid 2px red; background-color:#333; color:white; font-size:24px;}
#body1 {background-image:url(image.aspx?from=idstyle);}
.divTest:hover{background-image:url(image.aspx?from=hover);}
.divCur{background-image:url(image.aspx?from=style1);}
.divCur{background-image:url(image.aspx?from=style2);}
a:active{background-image:url(image.aspx?from=Aactive);}
</style>
<script type="text/javascript">
//alert('js');
function loadStyle()
{
var divStyle = document.getElementById('divStyle');
var style = '.<style type="text/css">a:active{background-image:url(image.aspx?from=htmlAactive);}</style>';
divStyle.innerHTML = style;
alert(divStyle.innerHTML);
}
</script>
</head>
<body>
<a href="#" onfocus="this.blur();">A active测试</a>
<input type="button" value="设置body Id" onclick="document.body.id = 'body1';" />
<input type="button" value="js修改样式" onclick="document.getElementById('div1').style.backgroundImage = 'url(image.aspx?from=js)';" />
<input type="button" value="js设置img" onclick="document.getElementById('img1').src = 'image.aspx?from=page';" />
<input type="button" value="输出页面A:active样式" onclick="loadStyle();" />
<div id="div1">
JS设置样式测试
</div>
<div class="divTest">
div class="divTest" hover测试
</div>
<div style="background-image:url(image.aspx?from=page);">
div style="background-image:url(image.aspx?from=page);" 直接样式
</div>
<div class="divCur">
div class="divCur" style测试
</div>
<div class="divCssFile">
div class="divCssFile" 外部Css测试
</div>
<img id="img1" />
<div id="divStyle" style="display:none;">
</div>
</body>
</html>