link external stylesheet conflicting with script src loading jquery?
Question
Hi I was doing a simple expanding slider with jquery and somehow the slider would expand to the full-width of the window, then shrink to the desired width I assigned it to do ..
(if you reload the page a few times, it comes up sometimes)
the problem seems to disappear switch the loading order of the and between jquery and my external stylesheet
but I am not sure why, I am wondering if anyone knows ????
here is the code that's causing the problem
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
css:
#slider{
width:10px;
height:20px;
background:#09C;
}
after switch the order of and the expanding issue disappear:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
css:
#slider{
width:10px;
height:20px;
background:#09C;
}
1 answers
solution1
0 ACCPTED 2011-10-03 09:31:15
Because scripts should always be loaded after static assets?
Most browsers render line by line from top to bottom so a change made on one line can be changed again on the next line.
If one loads the script first then the style will change the script.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.