脚本无法在Chrome和IE正常工作

链接:: http://amatrans.com.previewyoursites.com/脚本无法在Chrome和IE正常工作

下面的脚本是为滑块书面和在Firefox 其工作正常，但不是在

铬（鼠标悬停和鼠标离开它给白闪）和

IE（以悬停太多的第一次加载）

任何一个可以帮助我在

<script type="text/javascript"> 
     jQuery(".slides li").each(function(){ 
      var oldurl = jQuery(this).css('background-image'); 
      var imageUrl = jQuery(this).find('.bw_img').html(); 
      jQuery(this).css('background-image', 'url(' + imageUrl + ')'); 
      jQuery(this).find('.bw_img').html(oldurl); 
     }).mouseenter(function(){ 
      var oldurl = jQuery(this).css('background-image'); 
      var imageUrl = jQuery(this).find('.bw_img').html(); 
      jQuery(this).css('background-image', imageUrl); 
      jQuery(this).find('.bw_img').html(oldurl); 
     }).mouseleave(function() { 
      var oldurl = jQuery(this).css('background-image'); 
      var imageUrl = jQuery(this).find('.bw_img').html(); 
      jQuery(this).css('background-image', imageUrl); 
      jQuery(this).find('.bw_img').html(oldurl); 
     }); 
</script>

（其实我想黑色图像正常，重要的是鼠标悬停彩色图像）

来源

2012-10-23 softsdev

你可以提供一个小提琴？控制台中出现什么错误？ – Jarry

实际上错误没有出现需要加载的时间 – softsdev

您可以预载在一个隐藏的容器中的图像，以便更改背景，当你没有得到闪烁。

$(document).ready(function() { 
    var container = $('<div id="preloader" />').css('display', 'none').appendTo($(document.body)); 
    $('<img />').src(imageUrl).appendTo(container); 
});

来源

2012-10-23 14:29:32

由于图像已经加载，预加载不会有所帮助。他的jQuery代码只是重新安排现有的HTML，而不是加载任何新的东西。 – Sparky

当隐藏B & W图像并显示彩色图像时，闪光灯发生。由于您使用的是大型CSS背景图片，因此很难避免。

我建议重新调整代码以使用绝对定位的内联图像。然后，您可以简单地在B图像上方显示彩色图像，而不必删除B & W图像。

来源

2012-10-23 14:29:40 Blazemonger

谢谢但我用那个widgetkit 和它的图像作为背景图像这就是为什么... – softsdev

那么，你有一个根本性的问题。您可以尝试增加图像的压缩以使文件尺寸变小。 – Blazemonger

谢谢，我会尝试这个 – softsdev

我同意康斯坦丁再。预加载图像 - 可能是一个瓶颈。第二件事就是您要创建大量闭包，方法是迭代所有<li>元素并将事件附加到它们。你已经开使用jQuery on方法更好，例如：

jQuery(".slides li").on("mouseenter", function() { 
    // your mouseenter code 
}).on("mouseleave", function() { 
    // other code 
});

这将是更多的内存效率。

编辑：可以依靠CSS为这一特定使用案例：

.slides li:hover { filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
}

来源

2012-10-23 14:36:29

感谢使用第一个Chrome问题修复仍然不固定在IE – softsdev

就像我在其他答案中提到的，预加载不会有任何区别。如果您查看HTML代码，您会看到所有需要的图像都已加载。请解释。 – Sparky

你可以在CSS中做所有的事情。外层有黑白图像，内层有彩色图像。外李有'位置：相对'，内部有'位置：绝对;顶部：0;左：0;宽度：100％; height：100％'，然后添加'.slides li：hover> div {display：none}' –

脚本无法在Chrome和IE正常工作

回答

相关问题