Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 993
  • Last Modified:

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

0
kpisor
Asked:
kpisor
  • 4
  • 2
  • 2
  • +1
1 Solution
 
Gurvinder Pal SinghCommented:
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
 
kpisorAuthor Commented:
I'll check it out.
0
 
bugadaCommented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
un5tableCommented:
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
 
kpisorAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
kpisorAuthor Commented:
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
 
bugadaCommented:
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
 
kpisorAuthor Commented:
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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 4
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now