javascript - JQuery SlideShow 的图像并不总是以正确的尺寸加载

Question

你好，我添加了一个 JQuery SlideShow，其中包含 6 张 png 图片，每张图片大小为 548px X 320px

出于某种原因，有时当页面首次加载时，这些图像显得非常小。当我刷新页面时，图像显示为正常大小。同样，这并非每次都会发生。我不确定这是否是 JavaScript 错误，因为当我在 JFiddle 中运行它时，插件的 js 文件中出现了 JavaScript 错误。

http://jsfiddle.net/Mutant_Tractor/Re9pt/3/

我在其他网站上注意到他们实现了某种类型的 PreLoad()。我没有那个。

这是 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/slide4.png" />
        <img alt="image5" src="images/slide5.png" />
        <img alt="image6" src="images/slide6.png" />
    </div>

这是 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;
}

Answer 1

您可以尝试添加 width和 height幻灯片的 <img> 的属性标签。 IE 可能会忘记图像的大小。即使在 <img> 中指定尺寸不是问题标记是一个好习惯，所以它不会造成伤害。