测试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{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
欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
2010-12-26 图片压缩后上传[Flash]