元素第一次动画时遇到淡入淡出滞后答案

【问题标题】：Experiencing fade lag when element animates for the first time元素第一次动画时遇到淡入淡出滞后
【发布时间】：2016-08-06 16:18:37
【问题描述】：

我有一些自定义按钮来控制何时淡入元素（在 Jquery 中完成）。在大多数情况下，功能是我所期望的。唯一的问题是，当我第一次按下任何按钮时，动画会出现延迟（有时似乎完全跳过它）。我怀疑这与内容的初始加载以及初始加载后的后续缓存有关。

这是代码的sn-p：

$('.content').hide();
$('.button').click(function() {
    if ($(this).hasClass('active')){
        if (!state.isExpanded){
            $('.button').animate({height: '5vw', width: '5%'}, 500);
            $('#button-container').animate({height: '100%', width: '100%'}, 500);
            showSection($(this), 1000);
 ...
 ...

显示部分：

    function showSection(elem, duration) {
    var elemID = $(elem).attr('id');
    console.log(elemID);
    switch(elemID){
        case 'person-icon':
        $(aboutMeSection.ID).find('.content').fadeIn(duration);
        break;
    ...
    ...

值得注意的是，我正在尝试加载在 illustrator 中创建的多个自定义 SVG 图像，最大的单个对象为 2.2 mB。这是我第一次创建网站，所以媒体元素的合理尺寸对我来说并不明显。会不会太大了？

【问题讨论】：

替换为较小的图像进行测试。 2.2 MB 确实太大了，特别是对于矢量文件。
这确实是问题所在。 SVG 图像太复杂而无法优化，所以我只是创建了它的 PNG 版本（不知道为什么我一开始就坚持它是 SVG）。感谢您的确认。

标签： performance animation svg fade lag

【解决方案1】：

原来我使用的 SVG 图像太大。所以这个问题对任何有类似问题的人来说都不是完全浪费。

考虑您使用的图像是否需要是 SVG。作为一个菜鸟，我被它最近的流行所吸引，并将我创建的每张图像都保存为 SVG，而 PNG 就可以了。
在弄清楚该怎么做之前，我正在阅读一篇关于 SVG 优化的好文章：

Optimizing SVGs for Web Use

【讨论】：