javascript - 大型照片集的灰度到彩色悬停速度更快

Question

现在我有大约 2000 张带有灰度滤镜的图像。当我移除灰度滤镜时，不透明度悬停效果几乎是瞬间的。但是，对于灰度，它非常慢。

我想知道是否有更好的方法来实现这种效果，从而提高悬停的用户体验速度。

.image { 
    cursor:pointer;
    opacity:0.2;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%);
    filter: grayscale(100%); 
    filter: gray;
}
.image:hover {
    opacity:0.6;
    -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -ms-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
    filter: grayscale(0%);
    filter: none;  
}

Demo with Grayscale (注意它比下面慢得多)

Demo without Grayscale (注意它是多么的快)

Video showing slowness

Answer 1

作为 OP 的代码笔，如果你移动 filter: gray;/* IE 6-9 */ and filter: none;/* IE 6-9 */ up 它在 Safari 中快得多，不知道为什么会这样 我稍后研究和更新，目前，这是 filter< 上的 safari 速度慢的解决方案

section#pitches > div {
  width: 6.25%;
  display: inline-block;
}
section#pitches > div > div {
  cursor: pointer;
  opacity: 0.2;
  filter: gray; /* IE 6-9 */
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%); /* Firefox 4+ */
  padding-bottom: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
section#pitches > div > div:hover {
  opacity: 0.6;
  filter: none; /* IE 6-9 */
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
}

代码笔链接:https://codepen.io/hdl881127/pen/gRWWEm?editors=1100

似乎顺序很重要，我发现很少有帖子谈论 safari 的缓慢(300-500 毫秒延迟)，多年来一直没有解决其他浏览器特定末尾的 filter筛选。但是从这篇文章中，所有代码都按过滤器排序，然后是浏览器特定规则。似乎是一个解决方案

我希望有人看到这个可以对发生的事情给出一个可靠的解释？

REF: http://www.inserthtml.com/2012/06/css-filters/