CSS image loading test

Test when a CSS slice is loaded.

Test conclusion

The following style images are loaded when the page is loaded.

Embedded Style<Div style = "background-image: URL (image. aspx? From = page); ">

Embedded style sheet. Divcur {background-image: URL (image. aspx? From = style1 );}

If two

. Divcur {background-image: URL (image. aspx? From = style1 );}
. Divcur {background-image: URL (image. aspx? From = style2 );}

Then only the second image will be loaded.

External style sheet<Link href = "stylesheet.css" rel = "stylesheet" type = "text/CSS"/>Available Style

The following style is triggered under Different Conditions

Use js to modify the style and then load the image.

<Input type = "button" value = "JS modify style" onclick = "document. getelementbyid ('div1 '). style. backgroundimage = 'url (image. aspx? From = JS) '; "/>

Use js to modify the ID. The ID corresponds to the style to take effect.

# Body1 {background-image: URL (image. aspx? From = idstyle );}
<Input type = "button" value = "set body id" onclick = "document. Body. ID = 'body1';"/>

When. Divtest: hover {background-image: URL (image. aspx? From = hover );}Image loading only when hover is triggered

LikewiseA: active {background-image: URL (image. aspx? From = aactive );}Load images when you click

After the image is loaded, use<Input type = "button" value = "JS setting IMG" onclick = "document. getelementbyid ('img1'). src = 'image. aspx? From = page'; "/>

It is not triggered when the same image is loaded again.

Use JS embedded style on the page

<Input type = "button" value = "output page A: active style" 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 );
}

Note that the IE label must contain other characters outside the <style> </style> label. Style is valid.

Test Method

Set background-image: URL (image. aspx? From = xxx); when the request arrives at image. aspx, the background page is triggered. You will know who requested it.

test the Code as follows:

<! Doctype HTML> 
Test instance: http://files.cnblogs.com/zjfree/styleImgTest.rar