Open xuexb opened 6 years ago
bug场景重现:当被隐藏的标签 Tab 组件中有很多mip-img组件时(隐藏状态),页面第一次加载会请求所有的图片,导致http请求数过多,不利于性能优化,可以修复这个bug吗?
修复方案:修改可见性状态需要判断元素的 width
、height
和 display
,参考:Zepto 。
但这将导致目前很多组件在默认下隐藏元素,在操作(如点击切换、延迟显示等)页面时,没有触发 scroll
或者 resize
事件时,元素将不可见,这个影响面很大,有2种方案可以解决:
viewport.trigger('refresh')
),这是理想状态,但组件量比较大。ajax
异步内设置到页面,绑定的事件如:
方案这块 @harttle @schoeu @oott123 关注下。
召唤大神们来讨论,@VenyXiong
听起来需要沙盒,MIP有沙盒么?如果托管了所有 API 我们是知道更新时机的。
来看看有进展吗 😄
+1 看进展。
我们这边用 mip-img 也会偶然出现图片未加载的情况。顺便问下,MIP 规范禁止使用 <img>
标签推荐 <mip-img>
,但因为上面的问题,我切换到了 <img>
也可以正常显示暂时未发现问题,请问这样的话除了懒加载的特性会有什么潜在问题吗?
MIP 整个的组件遵循可见加载原则,当元素在屏幕可见范围内时才会触发元素的
firstInviewCallback
回调,但目前 MIP 组件元素被隐藏或者祖先元素被隐藏时,代码逻辑判断有误导致认为该元素是可见状态,从而直接加载了元素,导致资源浪费。https://github.com/mipengine/mip/blob/fc2e20a58e31a53f553eb6ffe5091c4f3e93d926/src/dom/rect.js#L165-L174
常见的场景有:
示例链接:https://m.idongde.com/18d6bf8565b1Aeb2.shtml