Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Preload (gallery-preload) on cdn

Last Updated: 03/17/12

+ 1 -

Caridy Patino

YUI Contributor

See 11 more by this user.

Created: 04/29/10
Last CDN Push: 05/5/10
Build Tag: gallery-2010.05.05-19-39
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.0pr2
Free for use.

Overview

Port of Stoyan Stefanov's JavaScript preload() function. More info about the original implementation here: http://www.phpied.com/preload-cssjavascript-without-execution/

It also has built-in support for Timer Idle (http://yuilibrary.com/gallery/show/idletimer), a module from Nicholas, to preload files only when the user is idle to avoid any overhead during the initial loading process.

Usage

This utility provides two methods:

Y.preload: preload one or more assets
Y.preloadOnIdle: preload module assets only when the user is idle for at least 100ms

This module was featured on YUIBlog. Read the article to learn more about it:
http://www.yuiblog.com/blog/2010/06/10/gallery-preload/

Examples

http://caridy.github.com/examples/gallery-preload/simple.html

CHANGELOG

Check the latest changes in this module.

http://github.com/caridy/yui3-gallery/tree/master/src/gallery-preload/

In this example the page prefetches some components that will be needed by the next page. The components are CSS, JS and PNG (sprite).

It also shows how to prefetch some components when the user become idle.

Click here to see the example:
http://caridy.github.com/examples/gallery-preload/simple.html

Code Sample

<script src="http://yui.yahooapis.com/3.5.0pr2/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.05.05-19-39'
}).use('gallery-preload', function(Y) {
 
    // multiple arguments, each represents an url
    Y.preload (
        'http://tools.w3clubs.com/pagr2/1.sleep.expires.png', 
        'http://tools.w3clubs.com/pagr2/1.sleep.expires.js', 
        'http://tools.w3clubs.com/pagr2/1.sleep.expires.css'
    );
 
    // preload files only when the user is idle for at least 100ms
    Y.preloadOnIdle ([
        'http://tools.w3clubs.com/pagr2/2.sleep.expires.png', 
        'http://tools.w3clubs.com/pagr2/2.sleep.expires.js', 
        'http://tools.w3clubs.com/pagr2/2.sleep.expires.css'
    ], 100);
 
    // waiting until the user focuses on an input element to start loading assets
    Y.on("focus", function() {
        // single argument (an array) with multiple files
        Y.preload ([
            'http://tools.w3clubs.com/pagr2/3.sleep.expires.png',
            'http://tools.w3clubs.com/pagr2/3.sleep.expires.js',
            'http://tools.w3clubs.com/pagr2/3.sleep.expires.css'
        ]);
    }, "#myinputelement");
 
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.05.05-19-39'
}).use('gallery-preload', function(Y) {

// multiple arguments, each represents an url
    Y.preload (
        'http://tools.w3clubs.com/pagr2/1.sleep.expires.png', 
        'http://tools.w3clubs.com/pagr2/1.sleep.expires.js', 
        'http://tools.w3clubs.com/pagr2/1.sleep.expires.css'
    );

// preload files only when the user is idle for at least 100ms
    Y.preloadOnIdle ([
        'http://tools.w3clubs.com/pagr2/2.sleep.expires.png', 
        'http://tools.w3clubs.com/pagr2/2.sleep.expires.js', 
        'http://tools.w3clubs.com/pagr2/2.sleep.expires.css'
    ], 100);

// waiting until the user focuses on an input element to start loading assets
    Y.on("focus", function() {
        // single argument (an array) with multiple files
        Y.preload ([
            'http://tools.w3clubs.com/pagr2/3.sleep.expires.png',
            'http://tools.w3clubs.com/pagr2/3.sleep.expires.js',
            'http://tools.w3clubs.com/pagr2/3.sleep.expires.css'
        ]);
    }, "#myinputelement");

});

Forum Posts

Subject	Author	Date
Like it... web workers	Matt Parker	06/11/10
Re: Like it... web workers	Matt Parker	06/11/10
Re: Like it... web workers	Caridy Patino	06/11/10
Quirk in Chrome	Ivan Dramaliev	07/23/10
Re: Quirk in Chrome	Caridy Patino	07/23/10
Re: Like it... web workers	Adam Veenendaal	08/3/10
Preload blocks user interaction	Ian Brandt	06/23/12
Re: Preload blocks user interaction	Ian Brandt	06/25/12