时间戳

首页 > 解决方案 > SVG 和 JQuery GIF 填充在 Firefox 上运行速度较慢

jquery - SVG 和 JQuery GIF 填充在 Firefox 上运行速度较慢

问题描述

我构建了一个交互式 SVG，其填充属性会随着每个组的悬停而变化。它在 Chrome 和 IE 中的我的 Wordpress 网站上正常运行，但在 Firefox 中，设置为填充的 GIF 不连贯，整个 SVG 响应不灵敏。这里出了什么问题？

奇怪的是，当 Web Inspector 在我的网站上在 Firefox 中打开以及在 Firefox 中运行此页面上的代码片段时，它的性能更好。我的网站似乎出现了问题。

我的网站

function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        list.push(img);
        img.src = array[i];
    }
}

preloadImages(['https://ijdonnelly.com/wp-content/uploads/2019/02/together.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/reflekt.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/harp.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/card.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/alien.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/a3.gif',
    'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png'
    ]);

var sOne = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lOne = 'https://ijdonnelly.com/wp-content/uploads/2019/02/card.gif';
  
var sTwo = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lTwo = 'https://ijdonnelly.com/wp-content/uploads/2019/02/together.gif';

var sThree = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lThree = 'https://ijdonnelly.com/wp-content/uploads/2019/02/reflekt.gif';

var sFour = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lFour = 'https://ijdonnelly.com/wp-content/uploads/2018/01/antmin-1.gif';

var sFive = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lFive = 'https://ijdonnelly.com/wp-content/uploads/2019/02/harp.gif';

var sSix = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lSix = 'https://ijdonnelly.com/wp-content/uploads/2019/02/alien.gif';

var sSeven = 'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png';
var lSeven = 'https://ijdonnelly.com/wp-content/uploads/2019/02/a3.gif';

$(function() {
    $('#one').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lOne);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lOne);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lOne);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lOne);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lOne);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lOne);
            
            $(".dOne").fadeIn("slow");
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);
            $('.dOne').fadeOut('fast');


        });
});

$(function() {
    $('#two').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lTwo);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lTwo);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lTwo);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lTwo);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lTwo);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lTwo);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);
            

        });
});


$(function() {
    $('#three').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lThree);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lThree);
          
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lThree);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lThree);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lThree);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lThree);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);

        });
});

$(function() {
    $('#four').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lFour);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lFour);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lFour);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lFour);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lFour);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lFour);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lFour);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);

        });
});


$(function() {
    $('#five').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lFive);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lFive);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lFive);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lFive);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lFive);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lFive);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
        
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);

            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
    
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);

            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);

        });
});

$(function() {
    $('#six').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lSix);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lSix);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lSix);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lSix);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lSix);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lSix);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);
            

        });
});

$(function() {
    $('#seven').hover(function() {
            var value = $('#img1 image');
            value.attr('xlink:href', lSeven);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', lSeven);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', lSeven);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', lSeven);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', lSeven);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', lSeven);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', lSeven);
            
        },
        function() {
            var value = $('#img1 image');
            value.attr('xlink:href', sOne);
            
            var value2 = $('#img2 image');
            value2.attr('xlink:href', sTwo);
            
            var value3 = $('#img3 image');
            value3.attr('xlink:href', sThree);
            
            var value4 = $('#img4 image');
            value4.attr('xlink:href', sFour);
            
            var value5 = $('#img5 image');
            value5.attr('xlink:href', sFive);
            
            var value6 = $('#img6 image');
            value6.attr('xlink:href', sSix);
            
            var value7 = $('#img7 image');
            value7.attr('xlink:href', sSeven);
            
        });
});
body {
  background-color: #edeeef;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="crys">
        <svg id="crystal" width="500px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1552.59 1053.68" xmlns:xlink="http://www.w3.org/1999/xlink">
            <a href="https://ijdonnelly.com/2018/01/22/a3-logo-animation/">
            <polyline points="154.59 396.52 154.59 291.75 77.29 239.37 0 291.75 0 396.52 0.27 396.7 0 396.7 0 658.44 0 694.63 0 763.21 77.29 815.59 154.59 763.21 154.59 658.44" fill="url(#img1)" id="one" />
            </a>
            <a href="https://ijdonnelly.com/2018/01/21/together-after-effects-short-film/">
          <polyline points="387.58 295.93 387.58 191.16 310.29 138.78 233 191.16 233 295.93 233.27 296.11 233 296.11 233 759.02 233 779.94 233 863.79 310.29 916.17 387.58 863.79 387.58 759.02" fill="url(#img2)" id="two" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/21/afterglow-maya-premiere/">
          <polyline points="620.59 232.27 620.59 127.5 543.29 75.12 466 127.5 466 232.27 466.27 232.45 466 232.45 466 823.96 466 876.7 466 928.72 543.29 981.11 620.59 928.72 620.59 823.96" fill="url(#img3)" id="three" />
          </a>
          <a href="https://ijdonnelly.com/2017/10/03/scanning-electron-microscopy-to-vr-assets/">
          <polyline points="853.59 157.15 853.59 52.38 776.29 0 699 52.38 699 143.33 699 157.15 699 896.53 699 905.99 699 1001.3 776.29 1053.68 853.59 1001.3 853.59 896.53 853.06 896.17" fill="url(#img4)" id="four" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/18/dslr-automata-max-msp/">
          <polyline points="1398 658.44 1398 763.21 1475.29 815.59 1552.59 763.21 1552.59 658.44 1552.32 658.26 1552.59 658.26 1552.59 396.52 1552.59 360.32 1552.59 291.75 1475.29 239.37 1398 291.75 1398 396.52" fill="url(#img5)" id="five" />
          </a>
          <a href="https://ijdonnelly.com/2017/10/03/melodi-musical-puzzle-game-unity-c/">
          <polyline points="1165 759.02 1165 863.79 1242.29 916.17 1319.59 863.79 1319.59 759.02 1319.32 758.84 1319.59 758.84 1319.59 295.93 1319.59 275.02 1319.59 191.16 1242.29 138.78 1165 191.16 1165 295.93" fill="url(#img6)" id="six" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/18/musical-water-fountain/">
          <polyline points="932 822.68 932 927.45 1009.29 979.83 1086.59 927.45 1086.59 822.68 1086.32 822.5 1086.59 822.5 1086.59 231 1086.59 178.25 1086.59 126.23 1009.29 73.85 932 126.23 932 231" fill="url(#img7)" id="seven" />
          </a>
          <defs>
            <pattern id="img1" patternUnits="userSpaceOnUse" width="2000" height="2000" rotation="50deg">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img2" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img3" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img4" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img5" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img6" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img7" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
          </defs>
        </svg>
      </div>

标签： jqueryfirefoxsvggiffill

解决方案

基本上，由于未优化代码，您会遇到性能滞后。考虑以下更改：

  1. 您不想为每个段单独使用完全相同的掩码；改用一个掩码并将其应用于所有段
  2. 为动画创建第二个蒙版
  3. 创建“水晶”的克隆并将其填充设置为第二个蒙版
  4. 默认隐藏克隆水晶
  5. 悬停时，将新图像应用于第二个蒙版并显示克隆晶体
  6. 应用过渡时间来掩盖褪色以获得更好的体验
  7. 不要为每个水晶使用单独的 JQuery 函数 - 一次性使用

应用所有这些之后 - 您将不会再注意到 Firefox 中的滞后

function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        list.push(img);
        img.src = array[i];
    }
}

var slides = [
  'https://ijdonnelly.com/wp-content/uploads/2019/02/card.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/together.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/reflekt.gif',
  'https://ijdonnelly.com/wp-content/uploads/2018/01/antmin-1.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/harp.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/alien.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/a3.gif',
  'https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png'
]

preloadImages(slides);

var $mask = $('#img2 image');
var $clip = $('.clip');

$(function() {
    $('svg a').hover(
      function(){
        $mask.attr('xlink:href', slides[$(this).index()]);
        $clip.css('opacity', 1);
      },
      function(){
        $clip.css('opacity', 0);
      }
    );
      
});
body {
  background-color: #edeeef;
}
.clip {
  opacity: 0;
  transition: 200ms opacity linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="crys">
        <svg id="crystal" width="500px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1552.59 1053.68" xmlns:xlink="http://www.w3.org/1999/xlink">
            <a href="https://ijdonnelly.com/2018/01/22/a3-logo-animation/">
            <polyline points="154.59 396.52 154.59 291.75 77.29 239.37 0 291.75 0 396.52 0.27 396.7 0 396.7 0 658.44 0 694.63 0 763.21 77.29 815.59 154.59 763.21 154.59 658.44" fill="url(#img1)" />
              <polyline points="154.59 396.52 154.59 291.75 77.29 239.37 0 291.75 0 396.52 0.27 396.7 0 396.7 0 658.44 0 694.63 0 763.21 77.29 815.59 154.59 763.21 154.59 658.44" fill="url(#img2)" class="clip" />
            </a>
            <a href="https://ijdonnelly.com/2018/01/21/together-after-effects-short-film/">
          <polyline points="387.58 295.93 387.58 191.16 310.29 138.78 233 191.16 233 295.93 233.27 296.11 233 296.11 233 759.02 233 779.94 233 863.79 310.29 916.17 387.58 863.79 387.58 759.02" fill="url(#img1)" />
              <polyline points="387.58 295.93 387.58 191.16 310.29 138.78 233 191.16 233 295.93 233.27 296.11 233 296.11 233 759.02 233 779.94 233 863.79 310.29 916.17 387.58 863.79 387.58 759.02" fill="url(#img2)" class="clip" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/21/afterglow-maya-premiere/">
          <polyline points="620.59 232.27 620.59 127.5 543.29 75.12 466 127.5 466 232.27 466.27 232.45 466 232.45 466 823.96 466 876.7 466 928.72 543.29 981.11 620.59 928.72 620.59 823.96" fill="url(#img1)" />
            <polyline points="620.59 232.27 620.59 127.5 543.29 75.12 466 127.5 466 232.27 466.27 232.45 466 232.45 466 823.96 466 876.7 466 928.72 543.29 981.11 620.59 928.72 620.59 823.96" fill="url(#img2)" class="clip" />
          </a>
          <a href="https://ijdonnelly.com/2017/10/03/scanning-electron-microscopy-to-vr-assets/">
          <polyline points="853.59 157.15 853.59 52.38 776.29 0 699 52.38 699 143.33 699 157.15 699 896.53 699 905.99 699 1001.3 776.29 1053.68 853.59 1001.3 853.59 896.53 853.06 896.17" fill="url(#img1)" />
            <polyline points="853.59 157.15 853.59 52.38 776.29 0 699 52.38 699 143.33 699 157.15 699 896.53 699 905.99 699 1001.3 776.29 1053.68 853.59 1001.3 853.59 896.53 853.06 896.17" fill="url(#img2)" class="clip" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/18/dslr-automata-max-msp/">
          <polyline points="1398 658.44 1398 763.21 1475.29 815.59 1552.59 763.21 1552.59 658.44 1552.32 658.26 1552.59 658.26 1552.59 396.52 1552.59 360.32 1552.59 291.75 1475.29 239.37 1398 291.75 1398 396.52" fill="url(#img1)" />
            <polyline points="1398 658.44 1398 763.21 1475.29 815.59 1552.59 763.21 1552.59 658.44 1552.32 658.26 1552.59 658.26 1552.59 396.52 1552.59 360.32 1552.59 291.75 1475.29 239.37 1398 291.75 1398 396.52" fill="url(#img2)" class="clip" />
          </a>
          <a href="https://ijdonnelly.com/2017/10/03/melodi-musical-puzzle-game-unity-c/">
          <polyline points="1165 759.02 1165 863.79 1242.29 916.17 1319.59 863.79 1319.59 759.02 1319.32 758.84 1319.59 758.84 1319.59 295.93 1319.59 275.02 1319.59 191.16 1242.29 138.78 1165 191.16 1165 295.93" fill="url(#img1)" />
            <polyline points="1165 759.02 1165 863.79 1242.29 916.17 1319.59 863.79 1319.59 759.02 1319.32 758.84 1319.59 758.84 1319.59 295.93 1319.59 275.02 1319.59 191.16 1242.29 138.78 1165 191.16 1165 295.93" fill="url(#img2)" class="clip" />
          </a>
          <a href="https://ijdonnelly.com/2018/01/18/musical-water-fountain/">
          <polyline points="932 822.68 932 927.45 1009.29 979.83 1086.59 927.45 1086.59 822.68 1086.32 822.5 1086.59 822.5 1086.59 231 1086.59 178.25 1086.59 126.23 1009.29 73.85 932 126.23 932 231" fill="url(#img1)" />
            <polyline points="932 822.68 932 927.45 1009.29 979.83 1086.59 927.45 1086.59 822.68 1086.32 822.5 1086.59 822.5 1086.59 231 1086.59 178.25 1086.59 126.23 1009.29 73.85 932 126.23 932 231" fill="url(#img2)" class="clip" />
          </a>
          <defs>
            <pattern id="img1" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
            <pattern id="img2" patternUnits="userSpaceOnUse" width="2000" height="2000">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500" width="2000" height="2000" />
            </pattern>
          </defs>
        </svg>
      </div>

代码笔示例

推荐阅读