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:
Code:
. . . 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:
Code:
<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:
Code:
<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.
jsjqslideshow_2b.js slow thumb loading
Reply With Quote
Bookmarks