Advanced Search

Results 1 to 1 of 1

Thread: UFade loading image never shows

  1. #1
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,687
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default UFade loading image never shows

    1) Script Title: Ultimate Fade-in slideshow (v2.4)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem: Since the loading image has no z-index it's always behind the gallerylayers which even when they have no images in them yet, have a background of black and a z-index of 1000 or 999.

    Further, in the document.ready portion of the fadeSlideShow function, because, the highlighted occurs too soon:

    Code:
    		if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
    		$loadingimg.hide()
    			slideshow.paginateinit($)
    			slideshow.showslide(setting.curimage)
    		}
    		else{ //initialize slideshow when first image has fully loaded
    			$loadingimg.hide()
    			slideshow.paginateinit($)
    			$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
    		}
    Even with a z-index property of 1000 (which is sufficient to show over the gallerylayers), the loading image is still never seen.

    Also, and this doesn't affect the loading image's showing up, only how big it might appear and/or it's positioning and only in certain cases, but as long as we're in the neighborhood, the width and height for the loading image are set in inline css style, not by jQuery's .css() function and lack the 'px' units required for that approach.

    Here's what I've found works well -

    1. Change these lines (starting at around line #56):

      Code:
      		var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
      			.css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
      			.appendTo(setting.$wrapperdiv)
      to (adds the px's and the zIndex):

      Code:
      		var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+'px;height:'+fadeSlideShow_descpanel.controls[2][2]+'px" />')
      			.css({zIndex:1000,left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
      			.appendTo(setting.$wrapperdiv)
    2. Move the second hide() to within the load function (code block starting around line #82, delays the loading image's disappearance until the slideshow image actually is loaded):

      Code:
      		if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
      			$loadingimg.hide()
      			slideshow.paginateinit($)
      			slideshow.showslide(setting.curimage)
      		}
      		else{ //initialize slideshow when first image has fully loaded
      			slideshow.paginateinit($)
      			$curimage.bind('load', function(){$loadingimg.hide();slideshow.showslide(setting.curimage)})
      		}


    Doing it that way, one could even get fancy about it and use $loadingimg.fadeOut() for the highlighted one, looks a little cooler.

    Updated Code:

    Attachment 4161

    Notes: The slideshow.paginate($) call could come before both of these as it's not contingent upon the image loading. There's still a wider issue about subsequent images in the slideshow perhaps not loading in time. It would be nice in cases like that if the loading image could reappear until they're loaded. But in most cases they do load in time because of the time taken to show the first and each subsequent image. For that a different approach might be good, like making the loading image the background image (center no-repeat) for the gallerylayers. Then it wouldn't have to be created or hidden.

    Later Notes: (10/27/11) Other bugs surfaced. The position was off for the loading image once it showed up. There were problems in some browsers with initial mouse overs as the page loaded, no image would load. A broken first image would break the entire script in IE. Description heights were set to the highest height. If these varied widely it looked unsightly. All these are fixed in the latest update, now attached to this post.

    Also: The code blocks in the above post are still valid, but in the attached version things got consolidated, so the exact code featured in this post is no longer in the updated attached script. It's functionality is.
    Last edited by jscheuer1; 10-27-2011 at 05:03 PM. Reason: add notes and attach updated code
    - 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
  •