第一次元素动画时遇到淡入淡出

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

这里的代码片段：

$('.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); 
... 
...

showSection：

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中最大的单个对象是2.2创建多个自定义SVG图像MB。这是我第一次创建网站，因此对于媒体元素的合理大小并不明显。可能这个太大了？

来源

2016-04-14 GHOST-34

更换成更小的图像进行测试。 2.2 MB的确太大了，特别是一个矢量文件。 – Duopixel

确实是这个问题。 SVG图像过于复杂，无法优化，所以我只是创建了一个PNG版本（不知道为什么我坚持要将其作为SVG）。感谢您的确认。 –

原来我用的SVG图片太大了。就这样，这个问题对任何有类似问题的人来说都不是完全浪费。

请考虑您使用的图片是否需要SVG。作为一个noobie，我陷入了它最近的流行，并且保存了我创建的一个SVG作为SVG时的图像，这时PNG会很好。
SVG的优化一篇好文章我读想通之前应进行哪些操作：

Optimizing SVGs for Web Use

来源

2016-04-14 23:31:08

第一次元素动画时遇到淡入淡出

回答

相关问题