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

Posted 2023-03-25

【中文标题】SVG 和 JQuery GIF 填充在 Firefox 上运行速度较慢

【英文标题】：SVG and JQuery GIF fill running slower on Firefox

【发布时间】：2019-07-19 08:48:53

【问题描述】：

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

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

My Site

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"  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"   rotation="50deg">
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500"   />
            </pattern>
            <pattern id="img2" patternUnits="userSpaceOnUse"  >
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500"   />
            </pattern>
            <pattern id="img3" patternUnits="userSpaceOnUse"  >
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500"   />
            </pattern>
            <pattern id="img4" patternUnits="userSpaceOnUse"  >
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500"   />
            </pattern>
            <pattern id="img5" patternUnits="userSpaceOnUse"  >
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500"   />
            </pattern>
            <pattern id="img6" patternUnits="userSpaceOnUse"  >
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500"   />
            </pattern>
            <pattern id="img7" patternUnits="userSpaceOnUse"  >
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500"   />
            </pattern>
          </defs>
        </svg>
      </div>

【参考方案1】：

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

您不想为每个段单独使用完全相同的掩码；改用一个掩码并将其应用于所有段 为动画创建第二个蒙版 创建“水晶”的克隆并将其填充设置为第二个蒙版 默认隐藏克隆水晶 悬停时，将新图像应用到第二个蒙版并显示克隆的晶体 将过渡时间应用于遮罩褪色以获得更好的体验 不要对每个水晶使用单独的 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"  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"  >
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500"   />
            </pattern>
            <pattern id="img2" patternUnits="userSpaceOnUse"  >
              <image xlink:href="https://ijdonnelly.com/wp-content/uploads/2019/02/cover2.png" x="-223" y="-500"   />
            </pattern>
          </defs>
        </svg>
      </div>

Codepen example

【讨论】：

这真是太棒了。非常感谢你！我不敢相信你也添加了淡入淡出；这是我长期以来一直在努力完成的事情！我迫不及待想要使用它。