随笔 - 317, 文章 - 0, 评论 - 453, 阅读 - 114万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

CSS图片加载测试

Posted on   PHP-张工  阅读(2925)  评论(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修改样式,修改后即加载图片。

<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

 

编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
历史上的今天:
2010-12-26 图片压缩后上传[Flash]
点击右上角即可分享
微信分享提示