lazyloading « SwellJS – another big fish in the sea

Posts Tagged ‘lazyloading’

by SleepyCod

27 Apr 09

Dazzling performance with JSONP and Swell

For an upcoming work we figured it would be useful to add JSONP support in our Asset component in order to load the given URL and once loaded, passback the JSON to a handler with the content.

What’s interesting with this approach is that we don’t rely on any hack to get the response such as evaluating all the script files in head or loading the content asynchronously then appending it.

There are numerous advantages using our solution :

You can load the JSON from multiple sources but keep a single handler, each JSONP file processed will be passed back as an argument
You can have a single handler for the whole sequence or listen events of each JSONP file being loaded with CustomEvents
The tags are removed from the DOM once loaded, this avoid memleaks or JSONP collision
This approach is robust and works equally between browsers even on old ones like MSIE 5.5

here’s a little example of what can be done:

Swell.Core.Asset.load('jsonp', [
    'http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=rideback&output=json&callback=',
    'http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=saintseiya&output=json&callback='
], function() {
    for(var _n = 0; _n < arguments.length; _n++) {
        var yim = arguments[_n];
        for(var _i = 0, _im; _im = yim.ResultSet.Result[_i++];) {
            html.img({
                'src'   : _im.Thumbnail.Url,
                'alt'   : _im.Title,
                'title' : _im.Title,
                'width' : _im.Thumbnail.Width,
                'height': _im.Thumbnail.Height
            }).appendTo('receiver');
        }
    }
});

No Comments , Tags: json webservices, jsonp, lazyloading

by SleepyCod

10 Apr 09

Introducing Swell’s lazy loader utility

Posted in Javascript, Swell

As we are preparing the upcoming release of Swell, we are actively working on a true and efficient dependency management system, and one of the key feature of the dependency manager is the ability to grab resources once the page is loaded.

Swell’s Core should be the only resource you would ever need to get started, it is not an understatement to say that we’ll lose adopters if the system is too hard to build.
Every component should be able to load its own UI definition, I mean being able to lazy load any css or image resource it needs.

Separation of concerns will help us to build a better library, that’s the way it should be, that’s the way we are !

We have looked at the various javascript lazyloading implementations on the web, some are interesting and well-minded, some others are just bloated.

Keep it simple stupid!

Our lazy loading implementation is able to load and monitor script, css and image resources, for example you want to use the Element component in your page and then want to use it when available into the global scope.

/** For a single script file without callback */
Swell.Core.Asset.load('script', 'Core/Element.js');
 
/** For multiple script files with a callback when all resources are loaded */
Swell.Core.Asset.load('script', ['Core/Element.js', 'Core/Hashtable.js'], function() {
    $('foo').addClass('meh');
});
 
/** Custom event when a single file is loaded */
Swell.Core.Asset.onResourceLoaded.subscribe(function(type, res) {
    if(type === 'img') {
        // Do something
    }
});
 
/** Advanced example */
var _imgs = $(document.body).getByClassName('swell-image-asset', 'img').setAttribute({'src' : 'blank.png'})
    .addEvent('mouseover', function() {
 
        this.addClass('loading');
 
        Swell.Core.Asset.load('img', 'largeimage.jpg', function(collection) {
            for(var _i = 0; _i &lt; collection.length; _i++) {
                this.setAttribute({'src' : collection[_i].src});
                collection[_i] = null;
            }
        }, this);
    }
);