search

AInoob / NooBox

A Chrome Extension that contains useful tools
https://ainoob.com/project/noobox
GNU General Public License v3.0
491 stars 49 forks source link

perf: preload for image to avoid flashing when loading #99

Closed orzyyyy closed 4 years ago

orzyyyy commented 4 years ago

Related to #92

AInoob commented 4 years ago

嘿，感谢PR～

不过你这个修改会把图片弄变形啊（／（ㄒｏㄒ）／～～）

这个是原来的 DeepinScreenshot_select-area_20200105101806

这个是你的修改后的 DeepinScreenshot_select-area_20200105101615

再来一组对比，这个更明显一点

这个是原来的 DeepinScreenshot_select-area_20200105101903

这个是你的修改后的 DeepinScreenshot_select-area_20200105102008

因为这个原因，我觉得体验并不是很好，所以不能merge. 你觉得呢？

orzyyyy commented 4 years ago
  1. 我觉得搜图就是看个大概的，看见差不多的就点进去看了。
  2. 有时候我需要的图片会被其他图片加载完成后的高度变化给挤下去，具体说就是我刚要点图，结果它上面的图刚好加载完，我点下去的居然不是我想要的那张图，这体验我觉得比变形还难受。
AInoob commented 4 years ago

这样的话我觉得加一个开关，用来控制是否自动更新页面比较好。 应该不会很难用。我这几天看看。 你要想自己写也欢迎。

orzyyyy commented 4 years ago

或者去掉固定高度，所有图片预加载完再显示好了。 另一个就是，图片在加载的时候才能确定高度，我没看明白这开关是要干嘛...如果不自动更新页面，那图就加载不出来；如果自动更新页面，那还是避不开闪烁的问题。

AInoob commented 4 years ago

嘿，我更新了一下，现在至少如果有新的引擎出来不会立刻更新搜索结果，这样应该会好一点，你可以在搜索结果页面弄成手动的试试。

orzyyyy commented 4 years ago

好是好些，但可能不用这么麻烦。 可以预加载首屏的图片，剩下的在首批加载完后再分批加载。一个是可以获得图片的正确高度，避免抖动；一个是不用加这个有些让人迷惑的开关...我一直觉得操作该越少越好。

orzyyyy commented 4 years ago

用 grid 布局，预加载图片宽高，在加载完成后显示，并开始下批图片的预加载。 每行高度取图片高度最大的那个，定宽。 这样如何？

AInoob commented 4 years ago

可以试试。你可以弄一个GIF吗？我平时没有遇到你说的图片加载问题，所以一直没有注意

orzyyyy commented 4 years ago

深度录屏_选择区域_20200108160328

AInoob commented 4 years ago

这个加载速度。。。很快啊

你这个是打开的已经搜索完成的结果。如果是搜索未完成的，我那个手动刷新就有效果了。

话说。。。在你这么快的加载下，你还是觉得体验不好吗？

orzyyyy commented 4 years ago

有时候看见想点的图，隔壁的图马上加载出来，就又得往下滚，我想解决的是这个“点不到”的问题，如果能点到，图加载多久都无所谓。这么想的话，反而网慢的时候没事。 多点一下我是觉得不舒服。右键搜，进来看，找到点进去就结束了，而不是还得等一段时间估摸着图加载完了，再去点更新按钮。

orzyyyy commented 4 years ago

既然预加载可以，我这几天就写出来。

AInoob commented 4 years ago

感谢～

不过你写的时候要弄成一个选项，就是可以开关的，不然默认打开的话，我可以遇见的问题就是最先的加载速度变慢了。我感觉预先加载和混乱加载速度上不同，体验上也不同，所以弄成一个选项，这样用户想用哪个就可以用哪个。

AInoob commented 4 years ago

歪个楼，关于你这个文章：https://orzyyyy.github.io/markdown/01859af5536c921096cae77a99ca7bf1

我觉得写的挺好的。 对我来说，我一般看到自己不认同的观点的时候就强行让自己冷静，想清楚自己可以学到什么，目标是什么。所以我现在在很多问题上就是墙头草（我并不讨厌这样），看了各个观点右后，感觉一下，然后有一个想法。如果后面事情更新了，我就重新判断，毕竟我只是想要尽可能的认清事实。

我基友表示很多当初吵的问题，有一些过一段时间我就接受了他的观点，然后还得意的觉得是自己想出来的～

orzyyyy commented 4 years ago

https://github.com/AInoob/NooBox/blob/f2620c61d7a503d60b89f7a9b38053a1a0b86b52/src/searchResult/content/content.tsx#L82 这方法为啥只会在 render 里返回值？

我现在是打算递归加载图片，像这里一样。这样就得把 resultList 放进 state，一边递归一边渲染。但现在在 componentDidMount 或者 componentDidUpdate 里都取不到值，就很尴尬。

AInoob commented 4 years ago

我觉得你可以放到store里面吧，放加载完成的result，然后filter还是怎么搞一下。

如果你有一个gif说明你想要的效果，可能我更能理解。（不过既然你敲代码，那其实也不用现在跟我解释。。。）

orzyyyy commented 4 years ago

为啥这里的 i18n 不会显示出来？ image

改动在这里：https://github.com/AInoob/NooBox/pull/99/commits/e5e87a78aa5c5a1129d8b1310b6044cac5a855ef 看上去索引是在的...

调了下发现是 chrome.i18n.getMessage(message) 返回为空。这里你有踩过坑吗？

重启浏览器就好了

orzyyyy commented 4 years ago

Done

AInoob commented 4 years ago

抱歉，最近又懒了。48小时内会review，可以的话我就merge了。

AInoob commented 4 years ago

我的感觉是这个feature没有对防止误点击做太大帮助，毕竟预先加载的图片会随着搜索引擎搜索完更新结果，而且给我的感觉很慢。不知道你有没有使用你这个功能。

但是毕竟可以设置，所以就merge了。

orzyyyy commented 4 years ago

我之后再看看。现在会因为后一批图片的更新导致图片位置整批变动，实际上这个不该存在，一加载出来是什么位置就不应该再变动。之前没复现估计是缓存的问题了。 实际上加载图片的时间就是那么长，区别在一次显示出来，还是一张张显示出来。后者会给人一种“进度条”的感觉，前者只要加上 loading，体感上也不会差太多。