1

我正在尝试通过 PreloadJS 库为我的网站创建预加载。

在该网站上，我通过 bodymovin / lottie 创建了十几个项目。

Bodymovin 使用图形元素和动画的所有信息创建 json 文件。使用 Lottie 将其呈现为 svg。

如果没有 PreloadJS，json 文件通常由浏览器加载，但使用 PreloadJS，它首先由浏览器加载，然后第二次预加载。

所以我想知道我做错了什么。

重复的预加载文件示例
两次预加载文件

我对图像（加载两次）有同样的问题，但我解决了将“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,
        }
    });
4

0 回答 0