asked on

Safari display: Image set for Jquery cycle() loads and shows in Safari: how do I stop this?

I have a banner on my production site, www.english-adventure.org, which has five images that I am rotating with the JQuery cycle() plugin.

In Safari 5.x only, not in Firefox or IE, I am seeing the images load and cover the page for about 0.3 sec, then they hide gracefully and begin a nice slideshow.

I want the page to load the first image cleanly, and the remaining ones in the background...is there a way to force this behavior? It works great in FF.

There are three code snippets here: 1) how my Javascript is called; 2) the code for the cycle() settings, and 3) the HTML page code, which is called at the top of the HTML, inside the <body> tag.

// JavaScript Document
$(document).ready(function() {
		 
		// Attach the cycle function to the Viewer
		$('#Viewer').cycle({
			fx:'fade',
			timeout: 4000,
			speed: 500,
			delay: -1000
		});	 // end SplashGallery cycle	
}); // end ready function

Open in new window

<div id="TopBanner">
	<div id="Viewer">
    	<div id="Photo_Ring_Dancing">
        <a href="program.php?pk_program=1">
            <img src="images/header_imageTop1.jpg" width="1070" height="326" title="Fun in the Outdoors" alt="Fun in the Outdoors" />            
        </a>            
        </div>
        <div id="Photo_LaughingGirls">
        <a href="program.php?pk_program=1">
            <img src="images/header_imageTop2.jpg" width="1070" height="326" title="Children Learn as They Play" alt="Children Learn as They Play" />          
        </a>            
        </div>
        <div id="Photo_AutumnLeaves">
        <a href="program.php?pk_program=1">
            <img src="images/header_imageTop3.jpg" width="1070" height="326" title="Living and Learning in Nature" alt="Living and Learning in Nature" />         
        </a>            
        </div>
        <div id="Photo_Swimming">
        <a href="program.php?pk_program=2">
            <img src="images/header_imageTop4.jpg" width="1070" height="326" title="Swimming in the Ocean" alt="Swimming in the Ocean" />          
        </a>            
        </div>
        <div id="Photo_Running">
        <a href="page.php?pk_program=1">
            <img src="images/header_imageTop5.jpg" width="1070" height="326" title="Fun in the Outdoors" alt="Fun in the Outdoors" />            
        </a>            
        </div>
        <div id="Photo_StaffListening">
        <a href="page.php?pk_page=4">
            <img src="images/header_imageTop6.jpg" width="1070" height="326" title="Staff That Care" alt="Staff That Care" />           
        </a>            
        </div>
        
    </div>  <!-- End Viewer div-->
    

</div> <!-- End TopBanner div-->

Open in new window

<head>
...
<!-- Load Javascript for pages -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript" src="js/displayPage.js"></script>
...
</head>

Open in new window

Gurvinder Pal Singh

You can preload the images and hide them early one
http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

give style="display:none" for all image tags early on

kpisor

ASKER

I'll check it out.

bugada

maybe you can move your javascript tags ath the end of the page just before the body close tag, this is recommended for speedup loading.

un5table

I would pre-load the images with JavaScript in the head as gurvinder372 suggested. I would also use either a progressive .jpeg or interlaced .png file to speed load time.

kpisor

ASKER

Following up on gurvinder372:
I followed the preloading Javascript idea, and I loaded the new preLoadImages into my page, ahead of the cycle() gallery.

// JavaScript Document
$(document).ready(function() {

            // Create a cache to hold the images as we load them
            var cache = [];

            // Arguments are image paths relative to the current page.
            $.preLoadImages = function() {
              var args_len = arguments.length;
              for (var i = args_len; i--;) {
                  var cacheImage = document.createElement('img');
                  cacheImage.src = arguments[i];
                  cache.push(cacheImage);
              }
            }

            // Here's our string of images to preload
            jQuery.preLoadImages(
                        "images/header_imageTop1.jpg",
                        "images/header_imageTop2.jpg",
                        "images/header_imageTop3.jpg",
                        "images/header_imageTop4.jpg",
                        "images/header_imageTop5.jpg",
                        "images/header_imageTop6.jpg"
                        );

}); //end ready function

The page loads as usual here, still seeing the images flash as they load in Safari.

If I set my HTML <img> tags to display=none, i.e., <img src="images/header_imageTop2.jpg" style="display:none" width="1070" height="326" title="Children Learn as They Play" />

...then the images never show on the page. The cycle() gallery just has a blank spot where the image would appear.

Where exactly do you declare the style="display: none" or I guess css("display":"none") in JQuery? Please advise.

Thanks,

Karl

Gurvinder Pal Singh

just add this after document.ready

$("img").css("display", "none");

or you can put the appropriate selector for those images (like assigning them a class)

kpisor

ASKER

Thanks, I tried that:

// JavaScript Document
$(document).ready(function() {

            // Set the display of all img tags in the Viewer div to none
            $("#Viewer img").css("display", "none");

            // Create a cache to hold the images as we load them
            ....

...and now all the images flash and then disappear, never to return. So this doesn't work.

This is my code at present. If you have a solution for this, could you load up an image yourself and test that it works? Then it would be easier for me to implement...

I appreciate your help!

// Load JQuery
...

// JavaScript Document
// preloadPageImages.js
$(document).ready(function() {
		 
		// Set the display of all img tags in the Viewer div to none
		$("#Viewer img").css("display", "none");
		
		// Create a cache to hold the images as we load them
		var cache = [];
		
		// Arguments are image paths relative to the current page.
		$.preLoadImages = function() {
		  var args_len = arguments.length;
		  for (var i = args_len; i--;) {
			var cacheImage = document.createElement('img');
			cacheImage.src = arguments[i];
			cache.push(cacheImage);
		  }
		}
		
		// Here's our string of images to preload
		jQuery.preLoadImages(
				"images/header_imageTop1.jpg", 
				"images/header_imageTop2.jpg", 
				"images/header_imageTop3.jpg", 
				"images/header_imageTop4.jpg", 
				"images/header_imageTop5.jpg", 
				"images/header_imageTop6.jpg"
				);
		
		
		
}); //end ready function

// JavaScript Document
// displayCycle.js
$(document).ready(function() {
		 
		// Attach the cycle function to the Viewer
		$('#Viewer').cycle({
			fx:'fade',
			timeout: 4000,
			speed: 500,
			delay: -1000
		});	 // end SplashGallery cycle

Open in new window

ASKER CERTIFIED SOLUTION

bugada

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kpisor

ASKER

First rate work, bugada. I really understood the placement of Javascript at the bottom of the page for the first time. Keep it up!