Tuesday, June 15th, 2010

Y.preload: load before execution

Category: Performance

Caridy Patino has posted on a new YUI3 module for preloading of content, implementing Stoyan’s ideas.

You can now strap on some preloading goodness to your YUI application:

javascript

  1. YUI({
  2.     //Last Gallery Build of this module
  3.     gallery: 'gallery-2010.05.05-19-39'
  4. }).use('gallery-preload', function(Y) {
  5.   Y.preload ([
  6.     'http://tools.w3clubs.com/pagr2/1.sleep.expires.png',
  7.     'http://tools.w3clubs.com/pagr2/1.sleep.expires.js',
  8.     'http://tools.w3clubs.com/pagr2/1.sleep.expires.css'
  9.   ]);
  10. });

As well as just loading away, you can also wait for the user to focus on something on the page before reloading:

javascript

  1. Y.on("focus", function() {
  2.     Y.preload ([
  3.       'http://tools.w3clubs.com/pagr2/2.sleep.expires.png',
  4.       'http://tools.w3clubs.com/pagr2/2.sleep.expires.js',
  5.       'http://tools.w3clubs.com/pagr2/2.sleep.expires.css'
  6.     ]);
  7. }, ".myform input.query");

Or, to take it even further, only preload if the user is probably idle:

javascript

  1. Y.preloadOnIdle ([
  2.     'http://tools.w3clubs.com/pagr2/3.sleep.expires.png',
  3.     'http://tools.w3clubs.com/pagr2/3.sleep.expires.js',
  4.     'http://tools.w3clubs.com/pagr2/3.sleep.expires.css'
  5.   ], 100); // ms

Nicely packaged.

Posted by Dion Almaer at 6:13 am
Comment here

++---
2 rating from 2 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.