有时候在做聊天等功能的时候,需要监听所有图片加载完成的事件并将页面滚动至底部,以下是实现代码
// 等待所有图片加载完成后滚动到底部
getImgLoadEd(callback) {
// 查询容器下所有图片
let images = document.getElementById('chatContentInner').querySelectorAll('.chat-img');
// Array.prototype.slice.call将images类数组转换成合法数组
const promises = Array.prototype.slice.call(images).map(node => {
return new Promise((resolve, reject) => {
let loadImg = new Image();
loadImg.src = node.src;
loadImg.onload = () => {
resolve(node);
}
});
});
// 利用Promise.all监听所有图片加载完成
Promise.all(promises).then(results => {
callback && callback();
}).catch(e => {
console.error('网络异常或其他程序异常', e);
})
}