mipengine/mip

mip-img 配合 mip-bind 使用,当mip-img不在视口的时候,报错!

vivine opened this issue · 0 comments

场景:
mip-bind 配合 mip-img 使用的时候会导致报错。
<mip-img m-bind:src="xxx.com/123.jpg"></mip-img>

原因:
因为 mip-bind 的时候触发了 mip-img 组件里边的 attributeChangedCallback。

customElem.prototype.attributeChangedCallback = function (attributeName, oldValue, newValue, namespace) {
if (attributeName === 'src' && oldValue !== newValue) {
this.element.querySelector('img').src = newValue;
}
};

而对于mip-img来说,如果组件没有进入视口范围的话,里边是没有创建img标签的。上面的代码 Line 301 就会报错。

解决办法:

customElem.prototype.attributeChangedCallback = function (attributeName, oldValue, newValue, namespace) { 
     var img = this.element.querySelector('img');
     if (img && attributeName === 'src' && oldValue !== newValue) { 
         img.src = newValue; 
     } 
};