PDA

View Full Version : jsjqslideshow_2b.js slow thumb loading



Al Fresco
02-27-2012, 02:58 PM
1) Script Title: jQuery Slide Show Plugin

2) Script URL (on DD): http://www.dynamicdrive.com/forums/showthread.php?t=52425&highlight=Gradual+Fader&page=4

3) Describe problem: I'm using this great script of John's. jsjqslideshow_2b.js The script works perfectly for what I need except the loading of the thumbs is really slow. I have galleries with about 40 images on each page. The script starts the slideshow before the thumbs have loaded. After the second slide has played the thumbs finally load. It all looks a bit weird.

Is there a way around this? Possibly for the thumbs to load first or something?

Thanks in advance for your help ........ again!

jscheuer1
02-27-2012, 03:21 PM
I'm no longer developing that script. Perhaps a different script would be better. Or we may be able to tweak things with this script. Are the thumbnail images large in byte size?

Anyways, if you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Al Fresco
02-27-2012, 03:30 PM
Hi John. Shame that - I really like that script as it covers a few bases. I'm novice at site building so I am reluctant to start this one again. Anyway the test page is here http://www.craigknowles.com/3anne
Maybe just a simple mistake on my part?
Cheers

jscheuer1
02-27-2012, 05:17 PM
I said I wasn't developing it any longer, not that I wasn't supporting it. Now that I'm revisiting it here, I may even continue developing it.

Anyways, there are three issues - loading sequence, byte total and layout.


The main images are loading before the thumbnails, that's why it takes so long for them to start loading. That's loading order.


All of the images are larger in byte size than they need to be, particulary the thumbs. At 12k each for such tiny (40x30) images, that's ridiculous. The should be able to be optimized by reducing their resolution to no more than 5k each. 1k each might not be unreasonable. The larger images are more of a judgment call, any of those that can be reduced in resolution for a smaller byte size without sacrificing too much quality in their appearance should be.

A trick when optimizing images, sharpen them a little first to make up for the loss of resolution when compressing them.

And always keep a backup copy of the unaltered images just in case you step on one too much and need to start over.

That's byte total.


The thumbnails when they do show up are (in at least some browsers) pushing each other around because their dimensions are unknown to the browser until they're loaded. That can easily be remedied by setting their dimensions in the stylesheet. That's layout.


I'd worry about #1 and #3 first. If you want to speed things up even more after that, refer back to #2.

For numbers 1 and 3 do the following:

Place this division in the body, highlighted as shown right after the opening <body> tag. This division will not be seen, it's a preloading division. Do not remove it's counterpart with the thumbnails in it from later on in the page:


. . . how3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->

</head>
<body>
<div style="position:absolute;visibility:hidden;left:-3000px;top:-3000px;">

<img src="images/loading.gif" alt="original image" title="">

<img class="slide_1" src="thumbs/one_white_cloud_015425.jpg" alt="original image" title="">
<img class="slide_2" src="thumbs/aftermath_1_020101.jpg" alt="original image" title="">
<img class="slide_3" src="thumbs/Aftermath_11_020225.jpg" alt="original image" title="">
<img class="slide_4" src="thumbs/autum_colours_singleton_015336.jpg" alt="original image" title="">
<img class="slide_5" src="thumbs/outback_020190.jpg" alt="original image" title="">
<img class="slide_6" src="thumbs/mutawindji_gorge_015325.jpg" alt="original image" title="">
<img class="slide_7" src="thumbs/ridge_top_kimberleys_015379.jpg" alt="original image" title="">

<img class="slide_8" src="thumbs/palms_bateau_bay_015444.jpg" alt="original image" title="">
<img class="slide_9" src="thumbs/the_herron_came_to_visit_015344.jpg" alt="original image" title="">
<img class="slide_10" src="thumbs/red_delight_015431.jpg" alt="original image" title="">
<img class="slide_11" src="thumbs/wattle_time_V9Q5568.jpg" alt="original image" title="">
<img class="slide_12" src="thumbs/bush_beauty_015402.jpg" alt="original image" title="">
<img class="slide_13" src="thumbs/Entanglement_020220.jpg" alt="original image" title="">
<img class="slide_14" src="thumbs/bush_dance_V9Q6626.jpg" alt="original image" title="">
<img class="slide_15" src="thumbs/Hillside_Formatutx_Mallorca_020279.jpg" alt="original image" title="">
<img class="slide_16" src="thumbs/fornalutx_mallorca_015417.jpg" alt="original image" title="">

<img class="slide_17" src="thumbs/singleton_landscape_015406.jpg" alt="original image" title="">
<img class="slide_18" src="thumbs/hillside_mallorca_2_015414.jpg" alt="original image" title="">
<img class="slide_19" src="thumbs/Summer_Bushland_Canberra_020317.jpg" alt="original image" title="">
<img class="slide_20" src="thumbs/kimberly_interior_2_020131.jpg" alt="original image" title="">
<img class="slide_21" src="thumbs/Cave_paintings_west_kimberleys_020162.jpg" alt="original image" title="">
<img class="slide_22" src="thumbs/Kimberely_Interior_020413.jpg" alt="original image" title="">
<img class="slide_23" src="thumbs/nesting_020268.jpg" alt="original image" title="">
<img class="slide_24" src="thumbs/mountain_morning_charlottes_pass_020302.jpg" alt="original image" title="">
<img class="slide_25" src="thumbs/cootamundra_siding_020274.jpg" alt="original image" title="">

<img class="slide_26" src="thumbs/bookmark_015457.jpg" alt="original image" title="">
<img class="slide_27" src="thumbs/Blue_Cow_020283.jpg" alt="original image" title="">
<img class="slide_28" src="thumbs/bush_walk_lord_howe_island_020308.jpg" alt="original image" title="">
<img class="slide_29" src="thumbs/coopers_creek_015460.jpg" alt="original image" title="">
<img class="slide_30" src="thumbs/murrundi_V9Q4477.jpg" alt="original image" title="">
<img class="slide_31" src="thumbs/Opencut_singleton_020343.jpg" alt="original image" title="">
<img class="slide_32" src="thumbs/touch_of_red_020312.jpg" alt="original image" title="">
<img class="slide_33" src="thumbs/rocks_kangeroo_island_015428.jpg" alt="original image" title="">
<img class="slide_34" src="thumbs/who_rolled_the_stone_away_bateau-bay-rocks_015372.jpg" alt="original image" title="">

<img class="slide_35" src="thumbs/Stained_Glass_Window_020332.jpg" alt="original image" title="">
<img class="slide_36" src="thumbs/Wee_Jasper_020208.jpg" alt="original image" title="">
<img class="slide_37" src="thumbs/studio_studie_020124.jpg" alt="original image" title="">
</div>
<div id="maincontainer">
<div id="topsection">
</div>
<div id="namecon"><img border="0 . . .

Next, in the stylesheet add the highlighted and remove the red:


<style type="text/css">
#container2 img {
width: 40px;
height: 30px;
}
.vactainer {
align:left;
width: 855px;
background: #ffffff;
}
.vacation {
background: white url(images/loading.gif) center no-repeat;
color: #ddd;
overflow: hidden;
height: 540px;
background: #ffffff;
}
.controls {
line-heigh . . .

One other important thing - You should remove the second highlighted copy of jQuery:


<link rel="stylesheet" type="text/css" href="flexdropdown.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="flexdropdown.js">
/***********************************************
* Flex Level Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

It's not required (the Flex Menu will happily use the one already on the page for the slideshow). Keeping it will only slow the load of the page.

The browser cache may need to be cleared and/or the page refreshed to see changes.