Solved

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

Posted on 2010-09-08
9
985 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

707 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now