Results 1 to 4 of 4

Thread: jsjqslideshow_2b.js slow thumb loading

  1. #1
    Join Date
    May 2007
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default jsjqslideshow_2b.js slow thumb loading

    1) Script Title: jQuery Slide Show Plugin

    2) Script URL (on DD): http://www.dynamicdrive.com/forums/s...l+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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2007
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.

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

    2. 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.

    3. 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •