Question

我使用jQuery通过鼠标悬停在页面上的某些元素上创建效果。每个元素都有一个＆＃34; normal＆＃34; 背景图像，鼠标悬停时，图像会发生变化并加载新的背景图像。将鼠标移出，恢复正常的背景图像。显然，我可以用CSS做同样的事情。但是由于其他考虑因素（例如，我用来触发的元素和页面上的其他效果，jQuery是一个更容易的工具）。

问题是;当事件被触发时，有一个＆＃34; flash＆＃34; - 真的，在图像加载时暂停。有趣的是，如果我鼠标移出鼠标，那就毫不犹豫了。当鼠标在一个元素上出现异常，然后鼠标在另一个元素上时，会导致滞后。

有什么方法可以明显地缓解这个问题吗？

使用的代码如下：

＆＃13;

      $(function() {
        $(".panel3-sub-button-text > p").hoverIntent(swapInFPP3Text, swapOutFPP3Text, function(){}); 
      });
      
      function swapInFPP3Text(evt) {
		
        // Get the class of the bubble
        $bubble_class = $(this).attr('id');
 
        
        //Swap in the appropriate text for the bubble hovered over
        if ($bubble_class == 'math-bubble-text' ) {
          console.log('>>> Fire rules for: ', $bubble_class);
          $('#panel3-default-text').addClass("hidden");
          $('#panel3-math-text').removeClass("hidden");
          $('#panel3-epidemiology-text').addClass("hidden");
          $('#panel3-hiv-text').addClass("hidden");
          $('#panel3-malari-text').addClass("hidden");
          $('#panel3-polio-text').addClass("hidden");
          $('#panel3-tuberculosis-text').addClass("hidden");
          $('div#math-bubble').css('background-image','url("/sites/default/files/fp_math_bubble_hover.png")');
          $('p#math-bubble-text').css('color','rgb(216, 216, 216)');

        }

＆＃13;

Answer 1

问题是您的图片需要一些时间来加载。尝试压缩图像。这是唯一的解决方案。如果压缩后速度很慢，请将这些图像替换为尺寸较小的其他图像。

修改

另一件事是，看看

$('div#math-bubble').css('background-image','url("/sites/default/files/fp_math_bubble_hover.png")');

您正在使用jquery动态加载图像。您可以做的是将此背景图像放入一个类中，隐藏它并在用户将鼠标悬停时显示它。因此，在用户将鼠标悬停在内容上之前加载图像。

Answer 2

尝试预加载悬停图像（将其放入正文载入或准备好）：

var preloaded_image = new Image();
preloaded_image.src = '/sites/default/files/fp_math_bubble_hover.png';

防止延迟图像显示

2 个答案: