search

TakWolf-Deprecated / CNode-Material-Design

CNode 社区第三方 Android 客户端，原生 App，Material Design 风格，支持夜间模式。
https://cnodejs.org
Apache License 2.0
1.34k stars 347 forks source link

图片加载还要再优化一下啊 #48

Closed marswong closed 7 years ago

marswong commented 7 years ago

有没有用到懒加载了？

12M的WIFI，自用，一篇多图的文章，一路滑下来，几乎看不到一张完整的图，这体验很差啊，望再优化一下

TakWolf commented 7 years ago

顶部的帖子正文，实现上是一个WebView包裹一个渲染后的html，图片是在 img 标签中，这里的体验和在浏览器中体验是相同的。 如果想要优化的话，不知道应该怎么做，能不能提供一个思路？

另外，图片上传是网站端完成的，服务端貌似并没有对图片进行压缩，因此，图片体积的问题，目前客户端没办法处理。

marswong commented 7 years ago

原本想拉下来测试写个 PR 来着，才发现是 Native App，一脸懵比。。。

目前主要是两个问题：

  1. 图片并行加载（一打开详情页不管三七二十一先给我把所有的图片都下下来）；
  2. 图片体积太大。

其实带宽允许的情况下，你用懒加载已经绰绰有余了，如果用了懒加载还是觉得不给力再考虑一下 WebP 压缩（现在的手机对 WebP 的支持非常好了），关于 WebP 可以参考下面这几篇：

TakWolf commented 7 years ago

客户端性质属于第三方客户端，接口是CNode提供的，这里只是调用，并不是CNode官方。 关于图片体积太大的问题，图片的压缩以及WebP格式，都是CNode服务端提供的，如果CNode的API不支持，客户端这里没有办法处理。

图片懒加载的问题，这里还是没太明白。 目前富文本部分，实现上是 Markdown -> html。客户端直接原生组件渲染富文本实现上有诸多问题，目前是直接用WebView载入渲染后的html。 原生组件还好说，如果是html怎么实现懒加载？大概的思路是什么？

图片都在img标签里面，现在有办法去控制img标签的加载行为吗？ 我这方面没有经验，目前想到的做法是：页面生成之后，用js对所有img标签做拦截然后做一些处理吗？

marswong commented 7 years ago

sorry，我 YY 了，忘记你的数据是 CNode 官方提供的了。

那图片压缩就不可行了，至于页面的懒加载，我刚刚看了一下安卓的书，可以在 WebView 里面用 JS 来操作 DOM 是吧？那就和你想的一样，可以在 onCreateWindow 的时候加载一段 JS，将原来的图片地址转成一个属性（data-src...），原来的 src 就指向一张默认的图片，当你滑动到当前图片的位置的时候在将 src 转换成 data-src，具体在 WebView 上实践不知道会不会有问题，你可以尝试一下。