mipengine / mip

[Deprecated] 请查看 mip2

https://www.mipengine.org/

MIT License

380 stars 81 forks source link

mip-img组件bug #245

Open Summer05246 opened 6 years ago

Summer05246 commented 6 years ago

mip-img组件当进入页面可视范围的时候插入img标签从而获取图片然而有个bug为进入div可视范围却不能获取图片举个例子：父级为宽度100%的div（overflow：hidden），中间为ul（宽度200%），子集为li，li中有个mip-img元素。当通过移动ul元素来达到显示被父级div隐藏的部分时，不触发mip-img加载图片的事件。望待解决，谢谢！

Summer05246 commented 6 years ago

图片的懒加载最好有个可配置父级容器，默认为全局body。

jennyliang220 commented 6 years ago

问题已经收到。谢谢反馈~~

Summer05246 commented 6 years ago

望顺便处理下 mip-carousel， mip-carousel组件为了避开了这个bug，遗留的问题就是没了图片的懒加载。 // 遍历mip-img计算布局 self.applyFillContent(ele, true); // inview callback bug, TODO var MIP = window.MIP || {}; MIP.prerenderElement(ele); var allImgs = ele.querySelectorAll('mip-img'); var len = allImgs.length; for (var idx = 0; idx < len; idx++) { self.applyFillContent(allImgs[idx], true); MIP.prerenderElement(allImgs[idx]); }

xiaojinping commented 6 years ago

mip-img在UC浏览器中以及QQ浏览器中，其宽度值并不是我设置的宽度，而是其父元素的百分百； http://xiekun5.w0.testwz.cn/html/mip-img.html这是使用了mip-img组件的测试页面。在手机上用UC或QQ打开。 http://xiekun5.w0.testwz.cn/html/legal_statement.html 这是我直接使用IMG的测试页面。

xiaojinping commented 6 years ago

上述问题是在安卓手机上测试的结果。ios没有做测试。

jennyliang220 commented 6 years ago

@xiaojinping 看到了你的页面，但layout="responsive" 这个属性的意思就是宽度为父元素的100%，高度自适应。可以看下组件布局文档。

<mip-img layout="responsive" width="62" height="62" src="/img/home.jpg">

jennyliang220 commented 6 years ago

待确认：在浏览器模拟的时候，使用滑轮滚动页面没有触发事件，需要点击上拉才可以触发图片加载。

xuexb commented 6 years ago

hi @Summer05246 针对这个 MIP 组件可见性状态逻辑预计做如下优化调整：

页面中隐藏的组件元素不触发组件代码，常见的隐藏状态有：
- 元素自身或者祖先元素存在 display: none 样式。
- 元素定位信息处于屏幕之外。
核心代码提供刷新视图 API 接口，组件 JS 代码在切换隐藏组件状态后，可主动调用 API 接口重新计算隐藏组件的状态并处理触发组件代码。

优化1是为了解决组件元素在不被隐藏时触发了加载逻辑，优化2解决自定义组件在设置其他组件隐藏状态时主动刷新计算逻辑。

xuexb commented 6 years ago

mipengine / mip

mip-img组件bug #245

289