Solved

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

Posted on 2010-09-08
9
986 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

930 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

11 Experts available now in Live!

Get 1:1 Help Now