Topic: Why are my thumbs loading so slow?

Hi,
I have down sized my photos, and the quality of the thumbs but for some reason the thumbs are taking a long time to show up on the screen.

The main images seem to be loading faster.

http://www.studiomoncrieff.com.au/studio.html
http://www.studiomoncrieff.com.au/productgallery.html

Are my thumbs loading in the backgound?

How do you get them to load in the foreground with the loading bar like this?
And faster?

http://www.bcpa.com.au/BCPA_Pages/2010_ … index.html




<?xml version="1.0" encoding="UTF-8"?>

<simpleviewergallery

    maxImageWidth="1024"
    maxImageHeight="768"
    imageQuality="80"
    thumbWidth="75"
    thumbHeight="75"
    thumbQuality="50"
    useFlickr="false"
    resizeOnImport="true"
    cropToFit="false"
    backgroundTransparent="true"
    backgroundColor="000000"
    galleryHeight="100%"
    thumbRows="5"
    frameWidth=""
    frameColor="000000"
    showOpenButton="false"
    showFullscreenButton="false"
    flashBrightness="2"
    stageBorder="10"
    stageHPadding="10"
    stageVPadding="0"
    stageVAlign="CENTER"
    enableLooping="false"
    lockTopStack="false"
    enableKeyboardControls="false"
    lockBottomStack="false"
    enableAPI="true"
    dropShadowStrength="0"
    imageFrameStyle="NONE"
    imageTransitionType="FLASH"
    imageTransitionTime="1.2"
    imageHAlign="CENTER"
    imageBackOpacity="1"
    showImageNav="NEVER"
    showOverlay="HOVER"
    hideOverlayOnTransition="true"
    thumbPadding="8"
    thumbFrameColor="999999"
    thumbFrameHoverColor="000000"
    showThumbLoadBar="true"
    thumbLoadBarHeight="15"
    thumbFrameWidth="1"
    thumbHoverFrameWidth="4"
    thumbClickShift="2"
    thumbLoadBrightness="0.7"
    doThumbPopOut="true"
    thumbNavStyle="CIRCLE"
    thumbNavBackColor="FFFFFF"
    showNavButtons="false"
    showAutoPlayButton="false"
    showAudioButton="false"
    showToolTips="false"
    buttonBarPosition="NONE"
    floatTitle="false"
    captionPosition="NONE"
    floatCaption="false"
    showImageNumber="false"
    enableCaptionLinks="false"
    showAutoPlayStatus="false"
    autoPlayThumbs="false"
    loopAudio="false"
    backgroundScale="FILL"
    flickrShowTitle="false"
    flickrShowDescription="false"
    showBackButton="false"
    useFixedLayout="false"
    imageVAlign="CENTER"

>
  <image imageURL="images/studio_1.jpg"
    thumbURL="thumbs/studio_1.jpg"
    linkURL="images/studio_1.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_2.jpg"
    thumbURL="thumbs/studio_2.jpg"
    linkURL="images/studio_2.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_3.jpg"
    thumbURL="thumbs/studio_3.jpg"
    linkURL="images/studio_3.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_4.jpg"
    thumbURL="thumbs/studio_4.jpg"
    linkURL="images/studio_4.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_5.jpg"
    thumbURL="thumbs/studio_5.jpg"
    linkURL="images/studio_5.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_6.jpg"
    thumbURL="thumbs/studio_6.jpg"
    linkURL="images/studio_6.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_7.jpg"
    thumbURL="thumbs/studio_7.jpg"
    linkURL="images/studio_7.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_8.JPG"
    thumbURL="thumbs/studio_8.JPG"
    linkURL="images/studio_8.JPG"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_9.jpg"
    thumbURL="thumbs/studio_9.jpg"
    linkURL="images/studio_9.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_10.JPG"
    thumbURL="thumbs/studio_10.JPG"
    linkURL="images/studio_10.JPG"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_11.jpg"
    thumbURL="thumbs/studio_11.jpg"
    linkURL="images/studio_11.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_12.jpg"
    thumbURL="thumbs/studio_12.jpg"
    linkURL="images/studio_12.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_13.jpg"
    thumbURL="thumbs/studio_13.jpg"
    linkURL="images/studio_13.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_14.jpg"
    thumbURL="thumbs/studio_14.jpg"
    linkURL="images/studio_14.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
  <image imageURL="images/studio_15.jpg"
    thumbURL="thumbs/studio_15.jpg"
    linkURL="images/studio_15.jpg"
    linkTarget="_blank">
    <caption><![CDATA[]]></caption>
  </image>
</simpleviewergallery>


Thanks Chris Moncrieff

Re: Why are my thumbs loading so slow?

If you navigate to your first image it is 373x477 pixels, but if you navigate to the thumbnail for this image it is 5400X5400 pixels. An image this large will take a while to load and it is not necessary for thumbnails to be of that quality, they should be somewhere around 70X70 pixels.

Mike Richards
SimpleViewer Support Team.

Re: Why are my thumbs loading so slow?

I am also experiencing a problem with slow loading thumbnails. In most cases, the thumbnails load up with a dark cast over them, and usually take a few seconds to load. I checked my thumbnails, and they are all at 75 x75 pixels and average 3 to 4 KB in size. Some of the thumbnails I created in Photoshop, as I prefer to crop a specific area of the image to use as a thumbnail.

Viewing the galleries is fine off my hard drive locally, but via Safari or Firefox the thumbnails load quite slowly. Once the page is cached to my browser, the galleries load up quickly. Are there any settings I can disable to speed this up?

Here are links to the galleries:

http://pixelstogo.com/retouching/PTG-retouching.html
http://pixelstogo.com/illustration/PTG- … esign.html
http://pixelstogo.com/gallery-3D/PTG-3D.html

My settings:

<?xml version="1.0" encoding="UTF-8"?>

<simpleviewergallery

    useFlickr="false"
    resizeOnImport="true"
    cropToFit="false"
    title="Image Retouching"
    backgroundColor="C0C0C0"
    backgroundTransparent="true"
    textColor="FFFFFF"
    frameWidth="8"
    thumbPosition="LEFT"
    thumbColumns="2"
    thumbRows="20"
    showFullscreenButton="false"
    showOpenButton="false"
    stageHPadding="20"
    stageVPadding="0"
    stageBorder="20"
    stageVAlign="TOP"
    stageHAlign="LEFT"
    imageDropShadow="true"
    flashBrightness="1"
    imageVAlign="TOP"
    imageTransitionType="CROSS_FADE"
    imageTransitionTime="1"
    imageNavBackColor="000000"
    imageNavStyle="CIRCLE"
    showBigPlayButton="false"
    thumbPadding="10"
    thumbFrameHoverColor="FFFFFF"
    thumbHoverFrameWidth="2"
    thumbClickShift="2"
    thumbFrameStyle="NONE"
    dropShadowStrength=".65"
    imageFrameStyle="SQUARE"
    imageCornerRadius=""
    imageNavPadding="0"
    hideOverlayOnTransition="true"
    imageNavScale=".75"
    thumbHAlign="LEFT"
    thumbVAlign="TOP"
    showThumbVisited="false"
    showThumbLoadBar="true"
    doThumbPopOut="true"
    changeImageOnHover="false"
    showAutoPlayButton="false"
    showAudioButton="false"
    titlePosition="NONE"
    titleFontColor="000000"
    titleFontName="Georgia, &amp;amp;amp;amp;amp;amp;quot;Times New Roman&amp;amp;amp;amp;amp;amp;quot;, Times, serif"
    titleFontSize="14"
    titleBackColor="000000"
    titleWidth="200"
    titleHeight="20"
    titleDropShadow="true"
    titleTextAlignment="LEFT"
    floatTitle="false"
    captionBackOpacity="0.6"
    showImageNumber="false"
    captionTextAlignment="CENTER"
    captionWidth="500"
    captionPadding="4"
    showBackButton="false"
    thumbFrameWidth="2"
    thumbCornerRadius="6"
    autoPlayOnLoad="true"
    useColorCorrection="true"
    enableLooping="true"
    thumbNavHoverColor="FFFFFF"
    thumbNavColor="FFFFFF"
    thumbNavBackColor="000000"
    imageNumberFontSize="10"
    captionFontColor="FFFFFF"
    captionFontName="Georgia, &amp;amp;amp;amp;amp;amp;quot;Times New Roman&amp;amp;amp;amp;amp;amp;quot;, Times, serif"
    captionFontSize="13"
    enableCaptionLinks="false"
    backButtonFontColor="FFFFFF"
    backButtonX="6"
    backButtonY="6"
    displayTime="3"
    thumbLoadBrightness=".5"
    changeCaptionOnHover="false"
    imageHAlign="LEFT"
    floatCaption="true"
    captionHeight="100"
    captionDropShadow="false"
    thumbLoadBarHeight="50"
    titlePadding="0"
    captionPosition="OVERLAY_BOTTOM"
    galleryWidth="100%"
    galleryHeight="100%"
    imageNavBackOpacity="0.6"

Re: Why are my thumbs loading so slow?

@davidp158

It may not be the thumbnails themselves as they are, indeed, small images.
The default value for the imagePreloading Pro Option is 'PAGE', whereby all the main images on the current thumbnail page are preloaded. If you have many thumbnails on each page and your main images are large, then this can take some time.
You could try setting imagePreloading="NONE" and each main image will be loaded only when selected by the user.
Also, the speed at which your web host serves up the images may also play a part.

Steven Speirs
SimpleViewer Support Team.

Re: Why are my thumbs loading so slow?

Steven,

Thanks for the prompt response and suggestions. I will try setting the image preloading to NONE and see if that helps. Will doing this disable the ability to fade from one image to the next? I find this effect useful for showing a transition between "before and after" images in my retouching gallery.

I suppose using the "auto play" feature imposes demands on the loading of images. Is there a formula to calculate how to get the thumbnails to finish loading before the 2nd main image is displayed with "auto play"?

Thanks for your support.
Dave

Steven Speirs wrote:

@davidp158

It may not be the thumbnails themselves as they are, indeed, small images.
The default value for the imagePreloading Pro Option is 'PAGE', whereby all the main images on the current thumbnail page are preloaded. If you have many thumbnails on each page and your main images are large, then this can take some time.
You could try setting imagePreloading="NONE" and each main image will be loaded only when selected by the user.
Also, the speed at which your web host serves up the images may also play a part.

Re: Why are my thumbs loading so slow?

Will doing this disable the ability to fade from one image to the next?

You should still be able to use imageTransitionType="CROSS_FADE" in conjunction with imagePreloading="NONE".

Is there a formula to calculate how to get the thumbnails to finish loading before the 2nd main image is displayed with "auto play"?

There is no formula and no way to control what preloads first (thumbnails vs main images).
However, the thumbnails, being very small, should finish loading very quickly in comparison to the main images.
There is also the option thumbPreloading which can be set to 'PAGE' or 'ALL'.

Steven Speirs
SimpleViewer Support Team.