ASP.net page jumps when rotating images but second time smooth

Hi

I just put up the following ASP.net site: www.leadershipsurvey.co.za
I am using the VB.net code below to load 10 images one by one every three seconds
The problem is that on the first rotation the screen jumps.
It doesn't jump on the second rotation.
How do I fix this? Do I perhaps load them all  very quickly on the page load?
Please go to the site to see what I mean
Thanks


    Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
        Call Display_Next_Image()
    End Sub

    Sub Display_Next_Image()
        Try
            Dim intLast As Integer = CInt(Me.lblImageNumber.Text)
            Dim oNextNumber As String

            If intLast = 10 Then
                Me.Image1.ImageUrl = "~/Images_Slide2/1.jpg"
                Me.lblImageNumber.Text = "1"
            Else
                oNextNumber = intLast + 1
                Me.Image1.ImageUrl = "~/Images_Slide2/" & oNextNumber.ToString & ".jpg"
                Me.lblImageNumber.Text = oNextNumber.ToString
            End If

        Catch ex As Exception
            Response.Write(ex.Message)
        End Try
    End Sub
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

selvolCommented:
You would be better off having the images broken up into sections of 3.

But try a pre-load for the images for now...

You can do  that a  simple way buy adding every image in the slide to to the page.
But hide them.  So when a visitor navigates to your page.  All the images are downloaded to
there computer cache.  Thus making the lag hopefully go away.

The first rotation of the slide is lagging because the images need to be downloaded.
And when the image changes, that is the first time the browser has seen the image.
So you must introduce the image to the browser before the slide does..

Do each of the 10 images like so at the pages bottom before the </body>

<img src="http://www.leadershipsurvey.co.za/Images_Slide2/7.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">

Open in new window


Selvol

add this to the bottom of the page  check I have the images named correctly.


<img src="http://www.leadershipsurvey.co.za/Images_Slide2/1.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">
<img src="http://www.leadershipsurvey.co.za/Images_Slide2/2.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">
<img src="http://www.leadershipsurvey.co.za/Images_Slide2/3.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">
<img src="http://www.leadershipsurvey.co.za/Images_Slide2/4.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">
<img src="http://www.leadershipsurvey.co.za/Images_Slide2/5.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">
<img src="http://www.leadershipsurvey.co.za/Images_Slide2/6.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">
<img src="http://www.leadershipsurvey.co.za/Images_Slide2/7.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">
<img src="http://www.leadershipsurvey.co.za/Images_Slide2/8.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">
<img src="http://www.leadershipsurvey.co.za/Images_Slide2/9.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">
<img src="http://www.leadershipsurvey.co.za/Images_Slide2/10.jpg"  width="1px" width="1px" style="position:fixed; left:-1900px; top:-1200px">

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dave BaldwinFixer of ProblemsCommented:
A normal javascript slide show will 'preload' the images so they appear 'instantly' instead of being loaded from the server each time in the first round.  This slideshow demo on one of my pages shows that.  http://www.dibsplace.com/webdev/SlideShow.html  I could shorten the transition time so they fade in and out very quickly.  It's the "Ultimate Fade In Slideshow v2.0"  http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm  There are quite a few like that but I've seen many others using it.
0
Dave BaldwinFixer of ProblemsCommented:
Here's a version using the first 6 of your images:  http://www.dibsplace.com/webdev/SlideShow-demo2.html  You can look at the view source and copy the code if you want.
0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Simple and effective. Great stuff! Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.