feature: 图片延迟加载、图片尺寸适配设备 #3
Conversation
| prefix: '', | ||
| quality: 100 | ||
| quality: 100, | ||
| adapt: true, |
There was a problem hiding this comment.
默认值我觉得要用 false，这样以前的应该才不受影响。
There was a problem hiding this comment.
adapt参数没有默认值，全局不配置的话，代码中就获取不到，也就不会进行适配。上面文档中只是例子，也可以设置成false。遵循的规则就是指令中的配置会shadow全局的配置。
build/mockIphone5.js
Outdated
| @@ -0,0 +1,2 @@ | |||
| document.documentElement.setAttribute('style', 'font-size: 64px') | |||
| document.documentElement.setAttribute('data-dpr', '2') No newline at end of file | |||
| viewWidth = +(html.getAttribute('style').match(/(\d+)/) || [])[1] | ||
| } catch(e) { | ||
| console.error('adapt参数需要配合lib-flexible库使用：https://github.com/amfe/lib-flexible') | ||
| } |
There was a problem hiding this comment.
最近项目打算从 flexible + rem 的模式切换到 vw，已经做了埋点，支持度大概能达到 99.89% 以上，迁移成本目测也不算高（改 px2rem 代码），以后可能不会再用 flexible 了...
DPR 可以通过 devicePixelRatio 来获得，viewWidth 应该可以计算得到~
There was a problem hiding this comment.
嗯嗯。淘宝lib-flexible也已经更新了，以前lib-flexible的宽度就是document.documentElement.getBoundingClientRect获取到的。我们也可以直接获取，而不需要从html元素的style特性获取。这一版需要这样改动吗？
src/utils.js
Outdated
| console.error('adapt参数需要配合lib-flexible库使用：https://github.com/amfe/lib-flexible') | ||
| } | ||
|
|
||
| if (hasDPR && !Number.isNaN(viewWidth) && typeof viewWidth === 'number') { |
There was a problem hiding this comment.
Number.isNaN 这里可能要注意一下
这个项目用的是 Buble...不清楚有没有安装对应的 Polyfill
似乎用 Number(viewWidth) >= 0 可以代替...
|
大概理解了一下逻辑： 这个逻辑和传统意义上的『懒加载』还是有些区别的 非常感谢这个 PR！太用心了！ |
|
是的，我们刚才也讨论了下，命名其实不对的。不是传统意义的懒加载，传统意义的懒加载等会儿会再搞上来。 |
|
我把指令中的参数名修改了下lazy => defer。避免和其他库的懒加载混淆。 |
| } catch(e) { | ||
| const dpr = window.devicePixelRatio | ||
| const w = html.offsetWidth | ||
| if (w / dpr > 540) { |
There was a problem hiding this comment.
其它方面我这里都没问题了，就是这里的 540 不是很能理解……求教……
There was a problem hiding this comment.
这儿我是参考lib-flexible库，当这个比值大于540时，w就取540 * dpr作为最大值。也就是超过540 * dpr的屏幕，就没必要再做适配了。毕竟我们现阶段还是使用的lib-flexible，就和它保持统一，等以后我们切到新的适配方案后，这儿代码估计也要做出调整，至少在不切前基本运行不到catch block。
3 participants
新增两个功能：