Reputation: 81
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
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,
}
});
Upvotes: 1
Views: 3049