1

I am trying to create a preload for my site via the PreloadJS library.

On the site I created a dozen items via bodymovin / lottie.

Bodymovin create json files with all the information of the graphic elements and animations. With Lottie it is rendered as svg.

Without PreloadJS the json file is normally loaded by the broswer, but with PreloadJS it is first loaded by the broswer and then preloaded a second time.

So I wondered what I was doing wrong.

Example of a duplicated preload file
twice preload file

I had the same issue with images (loaded twice), but I solved adding "false" to "new createjs.LoadQueue(false)" but with all other files type (json, js, css) the load twice issue is still there.

The preload part

var preload;
function setupImgs() {
    var images = $('#main').find('img').map(function(){
        return $(this).attr('src')
    }).get();
    var i = 0;
    $.each(images, function(index, value) {
        preload.loadFile({id:'img0'+i, src:value});
        i++;
    });
}
function setupSvgs() {
    var pathjson = basepath + 'assets/img/';
    var json = [
        pathjson+'contatti.json',
        pathjson+'grafica.json',
        pathjson+'lavori.json',
        pathjson+'packaging.json',
        etc.....        
    ];
    var i = 0;
    $.each(json, function(index, value) {
        preload.loadFile({id:'json'+i, src:value});
        i++;
    });
}
function startPreload() {
    $('#preload').css({'display': 'block'});

    preload = new createjs.LoadQueue(false);
    preload.on('fileload', handleFileLoad);
    preload.on('progress', handleFileProgress);
    preload.on('complete', loadComplete);
    preload.on('error', loadError);
    setupImgs();
    setupSvgs();
}
function handleFileLoad(event) {
    //console.log("A file has loaded of type: " + event.item.type);
}
function loadError(evt) {
    console.log("Error!",evt.text);
}
function handleFileProgress(event) {
    var p = Math.round(event.loaded * 100);
    $('.preload-perc').text(p + '%');
    $('.preload-bar').css({'width': p + '%'});
}
function loadComplete(event) {
    console.log("Finished Loading Assets");
}
startPreload();



The Lottie part

var ID = document.getElementById('servizi');

    var preload_logo = lottie.loadAnimation({
        container: ID,
        renderer: "svg",
        loop: true,
        autoplay: true,
        path: basepath+'assets/img/servizi.json',
        rendererSettings: {
            progressiveLoad: true,
        }
    });
Wolftrick
  • 81
  • 1
  • 10
  • If you load a file via XHR, it doesn't go to the browser cache, so if you load it again, it will download again. If you load it via PreloadJS, you have to pass around the loaded content, instead of requesting it again. – Lanny Nov 05 '19 at 16:05

0 Answers0