nivoスライダーオーバーフローの問題

Question

私のウェブページにはnivosliderを使用しています。ページが完全に読み込まれるまで、イメージは1つずつオーバーフローして見えます。ここに私が使っているCSSがあります。私はoverflow:hiddenプロパティを試しました。しかし、それは訂正されませんでした。どうすれば修正できますか？

CSS：

.nivoSlider { 
    position:relative; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; overflow:hidden; 
    left:0px; 
} 
/* If an image is wrapped in a link */ 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:500px; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:60; 
    display:none; 
} 
/* The slices in the Slider */ 
.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:50; 
    height:100%; 
} 
/* Caption styles */ 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#000; 
    color:#fff; 
    /*opacity:0.8; Overridden by captionOpacity setting */ 
    width:100%; 
    z-index:89; 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
/* Direction nav styles (e.g. Next & Prev) */ 
.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-prevNav { 
    left:0px; 
} 
.nivo-nextNav { 
    right:0px; 
} 
/* Control nav styles (e.g. 1,2,3...) */ 
.nivo-controlNav a { 
    position:relative; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    font-weight:bold; 
} 

HTML：

<div id="slider">     
    <img src="uploads/images/6431-45-york-st-kitchen-b.jpg" width="315" height="250" alt="" />     
    <img src="uploads/images/9931-45-york-st-front-a.jpg" width="315" height="250" alt="" />     
    <img src="uploads/images/8931-45-york-st-bed-1a.jpg" width="315" height="250" alt="" /> 
    <img src="uploads/images/3931-45-york-st-bath-a.jpg" width="315" height="250" alt="" /> 
    <img src="uploads/images/4031-45-york-st-study-a.jpg" width="315" height="250" alt="" /> 
    <img src="uploads/images/7531-45-york-st-kitchen-a.jpg" width="315" height="250" alt="" />  
    <img src="uploads/images/1931-45-york-st-living-b.jpg" width="315" height="250" alt="" /> 
    <img src="uploads/images/5531-45-york-st-foyer-a.jpg" width="315" height="250" alt="" /> 
</div> 

Answer 1

を次のようにこれは完全に多分HTMLを見ては有用であろう

Answer 2

これは主に低速の接続で発生し、これを処理する方法はありません。

しかし、あなたができることは、ページが完全に読み込まれた後にnivoスライダー機能を呼び出すことです。 window.onLoadプロパティを使用して、その内部にnivo関数を呼び出してください。

<script> 
    window.onload = init; 
    function init() { 
     /* call to your nivo function */ 
    } 
</script>