CSS圖片載入測試

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

測試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>

測試執行個體：http://files.cnblogs.com/zjfree/styleImgTest.rar

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More