Forums

Preload site

Permalink
Is there any way to preload each page before it displays. I have been having trouble with different parts coming up at different times. I am using a custom theme I made myself if that makes any difference.
hawkman4188
 
jelthure replied on at Permalink Reply
jelthure
I'm not sure if you can do it with jQuery, but know for a fact you can preload assets using MooTools:http://www.mootools.net

Either way I would suggest you preload the images at minimum. If you deside to go with MooTools I can walk you through it if you need a hand.
hawkman4188 replied on at Permalink Reply
hawkman4188
Yeah I actually just meant the images. If you wouldn't mind walking me through that would be a lot of help!
jelthure replied on at Permalink Reply 1 Attachment
jelthure
MooTools comes in 2 flavors/packages "core" and "more", core being just that the core classes and more extends the core giving it "more" functionality. :)

first you need to get a copy of MooTools Core:
http://www.mootools.net/download/get/mootools-1.2.2-core-yc.js...

Also you'll need the correct extensions from the more package, so to save time I've attached a copy for you containing what you need to preload the images.

Also i got carried away and wrote an example script that you can use. I attached the file to this post: "site.js"

Save all the files in the root "js" folder.

Next since the version of jQuery that C5 uses doesn't play nice with MooTools (last version i've tested didn't, but this might have changed since then) you will need to change the header_required.php file to switch between jQuery and MooTools depending on whether or not the current users is a guest or admin.

The best way i've found to do this is to copy the file from 
< root >/concrete/elements/header_required.php
to 
< root >/elements/header_required.php


Now open up the new header_required.php file and look around line 67 for this code: 

$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');  
$this->addHeaderItem($html->javascript('jquery.js', 'CORE'));  
$this->addHeaderItem($html->javascript('ccm.base.js', 'CORE'));


Replace that code with the following: 
if ( $u->isSuperUser() || $u->uGroups[3] ):  
  $this->addHeaderItem( $html->css( 'ccm.base.css' ), 'CORE' );  
  $this->addHeaderItem( $html->javascript( 'jquery.js', 'CORE' ) );  
  $this->addHeaderItem( $html->javascript( 'ccm.base.js', 'CORE' ) );  
else:  
  $this->addHeaderItem( '<script type="text/javascript" src="' . DIR_REL . '/js/mootools-1.2.2-core-yc.js"></script>' );  
  $this->addHeaderItem( '<script type="text/javascript" src="' . DIR_REL . '/js/mootools-1.2.2.2-more.js"></script>' );  
  $this->addHeaderItem( '<script type="text/javascript" src="' . DIR_REL . '/js/site.js"></script>' );  
endif;


That's it as long as every things in the right place you can clear your cache and go to the site your working on and you'll see that the page is white until all of the images are loaded. then it will fade in the page.

hope this is clear enough to follow, let me know if you run into problems.
hawkman4188 replied on at Permalink Reply
hawkman4188
Thanks alot! That will really help! I really appreciate you taking your time to write all that out! I'll let you know how it works, but for now..... off to bed...
kutis replied on at Permalink Reply
kutis
it has become an obsolete website practice to preload images because it makes the site less responsive and significantly slower,

learn to compress your images better (use save for web in photoshop, 72px per inch resolution)

if you're using more images for mouse over, learn how to use css sprite.

and if you don't really care and just need to finish things quickly... a simple javascript will do >http://www.pageresource.com/jscript/jpreload.htm...
jelthure replied on at Permalink Reply
jelthure
but he was looking for a way to better present his page to the visitor.