Question

我有一些自定义按钮可以控制何时淡入元素（在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中创建的多个自定义SVG图像，最大的单个对象是2.2 mB。这是我第一次创建一个网站，所以我不清楚合理的尺寸是什么媒体元素。这可能太大了吗？

Answer 1

原来我使用的SVG图片太大了。正因如此，对于遇到类似问题的人来说，这个问题并不完全是浪费。

考虑您使用的图像是否需要成为SVG。作为一个noobie我最近受欢迎，并保存了我作为SVG创建的每个图像，当PNG做得很好。
关于SVG优化的一篇很好的文章，我在阅读之前已经知道该做什么：

Optimizing SVGs for Web Use

元素第一次动画时经历渐弱渐变

1 个答案: