Solved

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

Posted on 2010-09-08
9
987 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:kpisor
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33634131
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
0
 

Author Comment

by:kpisor
ID: 33634522
I'll check it out.
0
 
LVL 10

Expert Comment

by:bugada
ID: 33634700
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.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Expert Comment

by:un5table
ID: 33642325
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.
0
 

Author Comment

by:kpisor
ID: 33660123
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
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33702276
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)
0
 

Author Comment

by:kpisor
ID: 33705759
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

0
 
LVL 10

Accepted Solution

by:
bugada earned 500 total points
ID: 33716999
To minimize flickering effects on webkit:

1) move all javascript (included jquery.js) to the bottom of the page just before the </body> tag.
Do not alter js order. Se example attached.

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

2) Remove all styles from #Photo_Ring_Dancing

3) Remove all styles but display:none from #Photo_LaughingGirls, #Photo_AutumnLeaves, #Photo_Swimming, #Photo_Running, #Photo_StaffListening (add display: none if not present)

4) Pay attention to non existent images, some are referenced in the code.

5) update cycle plugin to latest version (2.8.8)


</div><!-- End Outer div -->

<script type="text/javascript" async="" src="./EA_files/ga.js"></script>
<script type="text/javascript" src="./EA_files/jquery.js"></script>
<script type="text/javascript" src="./EA_files/displayPageNavigation.js"></script>
<script type="text/javascript" src="./EA_files/formAddDeleteEmail.js"></script>
<script type="text/javascript" src="./EA_files/formCamperRegistration.js"></script>
<script type="text/javascript" src="./EA_files/jquery.cycle.js"></script>
<script type="text/javascript" src="./EA_files/jquery.lightbox.js"></script>
<script type="text/javascript" src="./EA_files/displayPage.js"></script>
<script type="text/javascript" src="./EA_files/jquery.validate.js"></script>
<script type="text/javascript" src="./EA_files/jquery.greybox2.js"></script>

<script>
$(document).ready(function() {
	 // Set Greybox effect for link to privacy policy confirmation
	 var gbOptions = {
		  gbWidth: 700,
		  gbHeight: 550
	 };
	 $('#ActionLink').greybox(gbOptions);
	 $('.PricingDetailsLink').greybox(gbOptions);
}); // end ready()
</script>

</body></html>

Open in new window

0
 

Author Closing Comment

by:kpisor
ID: 33731178
First rate work, bugada. I really understood the placement of Javascript at the bottom of the page for the first time. Keep it up!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question