Images of JQuery SlideShow not always loading with correct size
Hello I added a JQuery SlideShow with 6 png images each with the size 548px X 320px
For some reason, sometimes when the page first loads these images appear very tiny. When I refresh the page, the images appear normal size. Again this doesnt happen every time. Im not sure if this could be a JavaScript error because when I run this in JFiddle there are JavaScript errors from the plugin's js file.
http://jsfiddle.net/Mutant_Tractor/Re9pt/3/
I've noticed on other sites that they implement some type of PreLoad(). I dont have that.
Here is the HTML:
<div id="top-feature">
<div class="slideshow">
<img alt="image1" src="images/slide1.png" />
<img alt="image2" src="images/slide2.png" />
<img alt="image3" src="images/slide3.png" />
<img alt="image4" src="images/sli开发者_开发知识库de4.png" />
<img alt="image5" src="images/slide5.png" />
<img alt="image6" src="images/slide6.png" />
</div>
Here is the CSS:
#top-feature {
height: 320px;
width: 848px;
margin: 12px 0 0 16px;
background: orange;
/*padding: 10px 0 0 10px;*/
position: absolute;
text-align: left;
}
#top-feature div {
/*float: left;*/
}
.slideshow {
height: 320px;
width: 548px;
margin: 0 0 0 0;
/*background: blue;*/
position: absolute;
}
You can try adding width
and height
attributes to the slideshow's <img>
tags. IE might be losing track of how big the images are. Even if it isn't the problem specifying the dimensions in <img>
tags is a good habit so it can't hurt.
Does this do what you are after?
JSFiddle
精彩评论