jQuery周期图像滑块插件（图像加载时间）

Question

If you check out the site stretchshapes.net, you can see we are using a plugin call VTEM slider to show advertisements on the top of our site.

It had been working fine for a number of months but just recently the image loading time have started taking forever. for example when the page loads you can see 3 or four of the slides that show appear later appearing below where the slider is located, then disappearing behind the slider, to be reveal later.

I have tried optimizing loading time of images but it didn't seem to do much. Seems to me that the jquery i am using to launch this should be able hid all the image behind one another in the first place not after the images load. Make sense? i hope so..

Here is the jquery that launches the slider:

 <script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function(){$('#vtemslideshow1').cycle({fx:'scrollHorz',timeout:6500,speed:1000,next:'#cycle_next',prev:'#cycle_prev',pager:'#vtemnav',pagerEvent:'click',pagerAnchorBuilder:pagerFactory,startingSlide:0,fit:true,height:69,width:425});function pagerFactory(idx,slide){return'#vtemnav a:eq('+idx+') span';};});/* ]]> */
 </script>

Answer 1

I'm not sure this is your issue but before calling your slide show you can hide all the slides and then they shouldn't appear. Consequently you could just add display:none on the server side to all but the first to be sure they are never displayed outside the slider.

$('#vtemslideshow1 a:gt(0)').hide(); // hide all but first $('#vtemslideshow1 a:gt(0)').hide(); // hide all but first $('#vtemslideshow1').cycle({fx:'scrollHorz',timeout:6500,speed:1000,next:'#cycle_next',prev:'#cycle_prev',pager:'#vtemnav',pagerEvent:'click',pagerAnchorBuilder:pagerFactory,startingSlide:0,fit:true,height:69,width:425});