Jquery 加载窗口时SVG绘图动画进度

我希望svg绘图动画从窗口加载开始，在窗口加载结束时结束。动画的速度应取决于加载速度

这是演示

另请参见此图以供参考

$(window).load(function() { 
 $('#status').fadeOut();
 $('#preloader').delay(350).fadeOut('slow');
 $('body').delay(350).fadeIn(500);
});

//svg drawing
var pathObj = {
 "icons": {
    "strokepath": [
        {"path": "M161.117,25.196l4.676-2.095l-2.672 1.837L161.117,25.196c0,0-8.683,3.173-15.029,4.843c-6.346,1.67-18.202,9.059-19.995,2.692c0,0-1.171-4.904-6.556-6.532c-5.864-1.773-9.685-1.169-15.196,2.672S90.318,37.073,87.58,41.933c-0.771,1.369-1.394,4.134,5.072,3.636c3.071-0.236,8.516,0.459,12.023-2.693c3.507-3.152,9.351,0.522,5.511,5.865s-11.522,5.511-17.2,5.344c-5.678-0.167-10.186,0.334-10.687,4.843s4.342,9.685-9.685,8.683c-14.027-1.002-2.505,18.703,5.344,9.351s13.526-9.518,17.701-8.182c4.175,1.336,1.002,6.68,4.509,9.685s6.694,0.167,13.784-2.004c7.09-2.171,11.097-1.002,13.101,1.336s5.01,8.182-2.505,10.687c-7.515,2.505-6.223-3.34-12.19-3.34c-1.983,0-3.601,3.149-6.012,5.344c-1.715,1.561-5.01,3.173-8.516-3.674c-3.507-6.847-7.692-10.93-13.025-6.847c-1.96,1.501-2.692,1.888-10.52,4.342c-5.213,1.634-10.019,3.142-15.864,15.029c-2.434,4.95-4.008,11.856,1.002,22.043c0,0,2.839,6.179,8.516,9.518c5.678,3.34,8.85,0.167,15.363-3.674c4.175-2.839,10.353,1.475,10.687,5.079c0.334,3.604,0,6.109,1.837,11.787c1.837,5.678,6.179,6.346,1.837,18.536c-4.342,12.19,2.505,19.037,4.175,22.21c1.67,3.173,3.094,6.459,4.843,8.015c2.884,2.567,10.019,5.01,15.196-2.755c5.177-7.765,6.475-7.218,7.181-10.27c0.604-2.613-1.336-5.963,1.169-10.663c2.505-4.7,4.843-3.364,6.346-6.036c1.503-2.672-2.672-17.367,1.336-21.041c4.008-3.674,9.685-10.52,13.192-15.53c3.507-5.01-0.501-7.181-2.672-6.68s-7.248,4.005-12.023-6.179c-2.134-4.55-7.014-11.188-11.188-16.699c-4.175-5.511,5.072-4.905,8.182,0.668c1.874,3.357,6.346,8.85,10.186,11.522s11.355,5.678,14.194,1.169c2.839-4.509,9.535-12.008,1.378-12.441c-2.755-0.146-9.059,6.429-10.562-0.584s2.366-11.22,6.68-5.678c5.807,7.462,8.758,3.679,15.593,3.612c3.359-0.033,4.169,3.831,8.12,11.751c1.852,3.714,2.146,7.726,6.68,15.196c1.525,2.513,6.216,8.421,11.522-2.338c2.619-5.31,4.801-19.663,16.323-17.158",
            "duration": 3000,
            "width": 500
        },
        {
            "path": "M39.361,189.047c0,0,5.072-16.845-11.272-27.804c-4.568-3.063-4.509-14.779-16.845-14.027",
            "duration": 300
        },
        {
            "path": "M31.742,40.001c0,0,9.809,5.121,8.557,8.315c-1.327,3.384-5.97,4.029-13.61,2.087c0,0-1.209,3.455-8.434,8.214",
            "duration": 300
        },
        {
            "path": "M109.435,215.251c-57.825,0-104.87-47.044-104.87-104.869c0-57.826,47.045-104.87,104.87-104.87s104.868,47.044,104.868,104.87C214.302,168.207,167.259,215.251,109.435,215.251z",
            "duration": 1500
        }
    ],
    "dimensions": {
        "width": 220,
        "height": 220
    }
  }
};

$(document).ready(function() {
$('#icons').lazylinepainter({
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#189B56"
}).lazylinepainter('paint');
});

---

我不相信这是可能的，因为您无法可靠地确定地预测加载时间。我也不认为这是一个好主意，因为当动画加载速度很快时，效果就不那么好了

您将遇到的一个问题是缓存（如果浏览器使用）。第一次有人查看您的页面可能需要一些时间，但是如果内容被缓存（图像、

.html

文件、

.CSS

文件、

.js

文件等），那么后续的加载速度会快得多。您没有很好的方法知道内容是否缓存在客户端上（部分或全部）（您可以监视缓存命中请求，但取决于TTL，客户端甚至可能不会从服务器请求资源）。如果使用标头禁用缓存，则至少可以保证在每次请求页面时下载包含的资源，但仍然无法可靠地预测总延迟（包括网络传输的传播延迟以及服务器和客户端计算机上的处理延迟）。理论上，您可以使用ping技术来尝试测量客户端和服务器之间的延迟，但即使这样也不可靠，并且可能会出现波动[并且不必要的复杂；首先考虑什么是加载映像的UX原因？通常是这样的，用户不会对慢加载内容感到不耐烦。它也充当过渡。] 您为绘制加载徽标选择了一组很好的计时，我建议您坚持使用它。下面是一个使用当前计时（5100毫秒：3000+300+300+1500）的示例。可能有一种回调方法可用于动画插件，但我没有查找它…而是在

document.ready（）中使用了
setTimeout

调用在

5100

毫秒后显示页面内容的函数。此函数仅在加载

窗口时显示页面内容，否则它将每隔
50
ms检查一次，直到
window.load（）
设置标志为止

结果:


一致的动画计时。动画将始终在显示内容之前完成
硬编码的最小加载时间比尝试调整延迟要简单得多
在加载窗口之前，动画不会消失。加载速度非常慢的用户可能必须盯着徽标看一段时间。加载速度非常快的用户必须观看整个动画，即使所有内容都已加载


函数ShowPageContent（）{
if（window.data.loaded）{
//加载窗口并完成动画，立即显示页面内容
$（“#状态”）.fadeOut（）；
$（'#preload'）。延迟（350）。淡出（'slow'）；
$（‘body’）.delay（350）。fadeIn（500）；
}否则{
//动画已完成，但窗口尚未加载；轮询加载标志
var-waitLoopMs=50；
设置超时（ShowPageContent，waitLoopMs）；
}
}
window.data={
加载：false
};
$（窗口）。加载（函数（）{
window.data.loaded=true；
});
//svg图形
var pathbj={
“图标”：{
“冲程路径”：[{
“路径”："1.7 7.7-6-6-6.6-6-6-6-6.6-6.5-6-6.5-5-5.864-5-5-4-4-1.864-1.7-1.7-1.7-7-7-7-6.7-6-6-6-6-6-5-5-5-5-5-5-5-5-5-4-4-4-4-4-1.7-1.7-7-1.7-7-7-1.7-7-7-7-1.7-7-1.7-7-1.7-7-7-7-1.7-7-7-7-7-7-7-7-7-7-1.7-7-7-7-7-7-7-7-7-1.7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-7-6C3.071-0.236,8.516,0.459,12.023-2.693c3.507-3.152,9.351,0.522,5.511,5.865s-11.522,5.511-17.2,5.344.4.3）4.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 2.505-6.223-3.34-12.19-3.34c-1.983,0-3.601,3.149-6.012,5.344c-1.715,1.561-5.01,3.173-8.516-6.5.5.5.5.7 7.7 7.7 7.7 7.7 7.7 7.5.5.5.5.5.5.5.5.7 7 7.7.7 7 7.7 7 7 7.7 7 7 7.7 7 7 7 7.7 7 7 7 7 7.7 7 7 7.7 7 7.7 7 7.7 7 7.7.7 7 7.7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 6.687,5.079c0.334,3.604,0,6.109,1.837,11.787c1.837,5.678,6.179,6.346,1.837,18.536c-4.342,12.19,2.505,14.843 3，8.169-1-1-1.6-1-1.6-1.6-1-1.6-1-1.6-1.6-1.5 5.5.5 5 5.5 5.7 7 7 7.7 7 7 7.7 7 7 7 7 7.7 7 7 7 7 7.7 7 7.7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 674,9.685-10.52,13.192-15.53c3.507-5.01-0.501-7.181-2.672-6.68s-7.248,4.005-12.023-6.179c-2.134-4.55-7.014-1.7.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.8.8.8.441.7-1.441.441111111111111111.6.1.1.1.1.1.1.1.7-12-12.7-12.44111c-1.44111111c-1-1.7-1.7-1.7-1.7-1.7-1.7-1.7-1.7-1.1.44111111111111111111111c-1.7-1.44111111c-1-1.1-1.7-1.7-1.7-1.7-1.44111111111111111111111111612C3.359-0.033,4.169,3.831,8.12,11.751c1.852,3.714,2.146,7.726,6.68,15.196c1.525,2.513,6.216,8.421,11.522-2.338c2.619-5.31,4.801-19.663,16.323-17.158“，
“持续时间”：3000，
“宽度”：500
}, {
“路径”：“M39.361189.047c0,0,5.072-16.845-11.272-27.804c-4.568-3.063-4.509-14.779-16.845-14.027”，
“持续时间”：300
}, {
“路径”：“M31.742,40.001c0,0,9.809,5.121,8.557,8.315c-1.327,3.384-5.97,4.029-13.61,2.087c0,0-1.209,3.455-8.434,8.214”，
“持续时间”：300
}, {
“路径”：“M109.435215.251c-57.825,0-104.87-47.044-104.87-104.869c0-57.826,47.045-104.87104.87-104.87s104.868,47.044104.868104.87C214.302168.207167.259215.251109.435215.251z”，
“持续时间”：1500
}],
“尺寸”：{
“宽度”：220，
“高度”：220
}
}
};
/* 
设置并绘制您的懒散线！
*/
$（文档）.ready（函数（）{
$（“#图标”）.lazylinepainter({
“svg