npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

quick-loader

v0.1.19

Published

quick-loader is an asset loader that loads everything

Downloads

278

Readme

quick-loader

quick-loader is an asset loader that loads everything. Say you have some third party libraries with their own loader modules, you can pipe the loading progress into quick-loader's loading pipeline. It also does basic loading for image, json, jsonp, text, video and audio.

Usage

Simple batch loading

Add several assets to the loader and get the percent of the batch loading.

// assuming you are using CommonJS
var quickLoader = require('quick-loader');

// load the asset with certain type
quickLoader.add('1.jpg', {type: 'image'});

// or let it guess the type by the url extension
quickLoader.add('2.jpg');

// you can also define the weight of the asset which is 1 by default
quickLoader.add('3.jpg', {weight: 2});

quickLoader.start(function(percent){
    
    // assuming the files are loaded in the same order as above
    // it will log 0.25, 0.5, 1.0
    console.log(percent);
    
    if(percent === 1) {
        init();
        
        // the listener was removed at this point and it
        // will not have any stacked async issue so you can
        // load something else again.
        quickLoader.add(...);
        quickLoader.start(...);
    }

});

Individual asset callback

You can add an onLoad callback to an individual asset.

quickLoader.add('data.json', {
    onLoad: function(data) {
        console.log(data);
    }
});
quickLoader.add('img.jpg');
quickLoader.start(...);

Load a single item out of the quick-loader pipeline

For all feature that works with Batch loading, it works with individual asset loading as well. Basically all you need is to change the add() into load()

quickLoader.load('data.json', {
    onLoad: function(data) {
        console.log(data);
    }
});

Initial content

Sometimes when you add the loading query to the batch loader, you want to have access to the asset instance immediately. This feature only works with asset types: image, video and audio

var img = quickLoader.add('img.jpg').content;

quickLoader.start(...);

No Cache

Normally after an item is loaded, the content will be stored and if you fetch the same url, it will not download the content again. But you can set noCache to true in the item config and bypass this feature. It will remove the reference after the file is loaded.

quickLoader.load('img.jpg', {
    noCache: true
});

Working with third-party library loader like THREE.JS JSON Loader

quickLoader.load('mesh.json', {
    
    type: 'any',
    
    loadFunc: function(url, cb, loadingSignal) {
        
        var loader = new THREE.JSONLoader();
        
        loader.load( url, function( geometry, material ) {
            var mesh = new THREE.Mesh( geometry, material);
            
            // tell quickLoader the item is loaded and
            // store the mesh instead as content
            cb(mesh);
        });
    }
});

Postprocessing

You can do postprocessing work with onPost

quickLoader.load('data.json', {
    type: 'json',
    postWeightRatio: 0.2 // [0-1] default 0.1, the weight ratio to the actual weight
    onPost: function(content, postLoadingSignal) {
    	content.foo = 'bar';
    	postLoadingSignal.dispatch(1); // complete
    }
});

Individual asset preloading

You can also add listener to the individual asset. This feature only works with asset types json, text and any.

quickLoader.add('data.json', {
    type: 'json',
    weight: 5,
    hasLoading: true,
    onLoading: function(percent){
        console.log(percent);   
    }
});

Individual asset preloading with third-party library

This following example is to show you when you are using any asset type, you can do whatever you want.

quickLoader.add('a_fake_loader', {
    type: 'any',
    weight: 50,
    hasLoading: true,
    onLoading: function(percent) {
        console.log('loading: ' + ~~(percent * 100) + '%');
    },
    onLoad: function(content) {
        // some content here
        console.log('loaded: ' + content);
    },
    loadFunc: function(url, cb, loadingSignal) {
        var count = 0;
        var interval = setInterval(function(){
            count++;
            loadingSignal.dispatch(count / 10);
            if(count == 10) {
                clearInterval(interval);
                cb('some content here');
            }
        }, 100);
    }
});

Add a chunk of assets

quickLoader.addChunk(['1.jpg', '2.jpg', '3.jpg'], 'image');

// let quick-loader to guess the types
quickLoader.addChunk(['1.jpg', '2.txt', '3.json']);

Add DOM Images(experimental)

It adds all images through img tag and background images.

quickLoader.addChunk(document.body.querySelectorAll('*'));

Multi-batch Loader instances

For some reason if you want to have 2 loaders, you can create a new one like this:

var quickLoader = require('quick-loader');

var batchLoader = quickLoader.create();
batchLoader.add(...);

Cross Origin

var quickLoader = require('quick-loader');

// set for everything cross-origin within a domain
quickLoader.setCrossOrigin('http://mydomain/', 'anonymous')

// set cross-origin for individual load item
quickLoader.add('http://anotherdomain/image.jpg', {
  crossOrigin: 'anonymous'
})

Installation

Download the standalone version HERE

npm install quick-loader

License

MIT License