CSS图片加载测试

Posted on 2011-12-26 13:13 PHP-张工阅读(2924) 评论(0) 编辑收藏举报

测试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修改样式，修改后即加载图片。

使用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嵌入样式

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{width: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>

测试实例：https://files.cnblogs.com/zjfree/styleImgTest.rar

刷新页面返回顶部

ZjFree-自由自在

公告

CSS图片加载测试