:: Ultimate Fade-in slideshow - empty first image in IE8

**west05** · 10-08-2009, 01:00 PM

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

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

3) Describe problem: In IE8 the first image does not show unless the page is refreshed (ctrl F5). If you go to another page and then back again randomly the first image will show. Click the next button it moves to image 2 and if you go back the first image is there. It works in every other browser but IE8.

Any help greatly appreciated

http://www.braycottages.com/test/christmas.htm and click on photo gallery

**jscheuer1** · 10-08-2009, 04:08 PM

Works OK here in IE 8 on both the demo page on Dynamic Drive and on the gallery page from the page you link to. It did seem to take a little more time perhaps to load up the first image than might other browsers, but it did. You may always optimize your images to decrease the time required for this.

Are you sure your IE 8 is up to date? Are you allowing it to pick the display mode which it feels best suits the page, or do you have it set to display in IE 7 or quirks mode? My IE 8 chose to use IE 8 Standards and, as I say worked fine. You can use a meta tag to force IE 8 Standards mode:

Code:

<meta http-equiv="X-UA-Compatible" content="IE=8">

If you do, it should be the very first meta tag on your page.

**west05** · 10-08-2009, 05:16 PM

Hi

Thanks for the reply. It's not just my IE8, It's the same for my client and also on other machines i've tested it on. I have already optimised the images as much as I can.

Added the meta tag, didn't make any difference

**jscheuer1** · 10-08-2009, 05:33 PM

Do you have the same problem on the demo page on Dynamic Drive?

**jscheuer1** · 10-08-2009, 05:40 PM

Wait a minute, I'm having the opposite problem from what you describe. If you navigate away and then use the back button, then you need to refresh. But this is not happening on the Dynamic Drive Demo, just your page. You may want to turn persist on, but this is just a fudge, there must be some underlying problem.

**west05** · 10-08-2009, 05:52 PM

No the demo page is fine which is really stange. I just can't spot anything wrong.

**west05** · 10-08-2009, 06:01 PM

I've spent about 3 hours on this so far, put it in a table, out of a table, in and out of divs, changed doc type, content type, disabled caching.......the list goes on

Thanks for your help on this

**ddadmin** · 10-08-2009, 06:53 PM

Hmm this is a strange one. The script by design will start the slideshow when the first image has fully loaded. From the look of your page, it seems IE doesn't always signal when that happens, despite the fact that the script contains code that should have accounted for that bug. What happens if inside the .js file, you replace the following:

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)})
		}

with just:

Code:

			$loadingimg.hide()
			slideshow.paginateinit($)
			slideshow.showslide(setting.curimage)

**west05** · 10-08-2009, 07:56 PM

Yes it seems to work with that code. Obviously no fade on the first image but I can live with that

Thanks

**jscheuer1** · 10-09-2009, 01:42 AM

DD, I find it odd that you appear to think IE 8 doesn't fire onload of images. Do you?

I've tried this various ways (hard coding to the tag, hard coding to injected HTML, etc. without being able to find IE 8 lacking, here's one fairly obtuse method, IE 8 still fires the event:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){
var i = new Image();
$(i).bind('load', function(){alert('loaded, width: ' + this.width);}).attr('src', 'http://i26.tinypic.com/11l7ls0.jpg');
});
</script>
</head>
<body>
<div id="test">

</div>
</body>
</html>

Thread: :: Ultimate Fade-in slideshow - empty first image in IE8

Thread Tools

Search Thread

:: Ultimate Fade-in slideshow - empty first image in IE8

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions