Question

Link :: http://amatrans.com.previewyoursites.com/

下面的脚本是为滑块编写的，它在firefox中工作正常但不是

Chrome（鼠标移开和鼠标移动它会产生白色闪光）和

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>

（实际上我想要黑色图像正常并且在鼠标悬停的彩色图像上）

Answer 1

您可以在隐藏的容器中预加载图像，这样在更改背景时不会出现闪烁。

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

Answer 2

当隐藏B＆amp; W图像并显示彩色图像时，会出现闪光。由于您使用的是大型CSS背景图像，因此很难避免。

我建议您重新调整代码以使用绝对定位的内嵌图像。然后，您可以简单地在B＆amp; W图像的顶部显示彩色图像，而无需移除B＆amp; W图像。

Answer 3

我同意康斯坦丁的观点。预加载图像 - 它可能是一个瓶颈。第二件事是你通过迭代所有<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%);
}

脚本在Chrome和IE上无法正常运行

3 个答案: