Предварительная загрузка файлов json, созданных bodymovin / lottie, дважды загруженных PreloadJS - PullRequest
Новая
       74

Предварительная загрузка файлов json, созданных bodymovin / lottie, дважды загруженных PreloadJS

1 голос
/ 24 октября 2019

Я пытаюсь создать предварительную загрузку для моего сайта через библиотеку PreloadJS.

На сайте я создал дюжину элементов с помощью bodymovin / lottie.

Bodymovin создает файлы json со всемиинформация о графических элементах и ​​анимации. При использовании Lottie он отображается как svg.

Без PreloadJS файл json обычно загружается посредником, но в PreloadJS он сначала загружается посредником, а затем предварительно загружается второй раз.

ИтакЯ задавался вопросом, что я делаю неправильно.

Пример дублированного файла предварительной загрузки
twice preload file

У меня была та же проблема с изображениями (загружен дважды),но я решил добавить «false» в «new createjs.LoadQueue (false)», но со всеми другими типами файлов (json, js, css) проблема с двойной загрузкой все еще существует.

Предварительная загрузка 

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();



часть Лотти 

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,
        }
    });
...