js - 判断图片是否加载完成

做聊天室的时候，如果又图片并不会滚动到底部。这时候图片还没加载完成，需要判断聊天图片是否加载完成

var imgAllLoad = (cb) => {
    var flag = 0
    var all = [...document.querySelectorAll('img')]
    //  .filter(e => e.className == 'img-style')
    all.forEach((elm, index, arr) => {
        let handle = () => {
            if(flag == arr.length){
                cb()
            }
        }
        if(elm.complete){
            flag++  
            handle()
            return
        }
        elm.onload = () => {
            flag++  
            handle()
        }
    })
}

• VUE例子

scrollChatMessageBotton(){
            this.$nextTick(() => {
                try {
                    this.imgAllLoad(() => {
                        this.$refs.chat_list[this.chatList.length - 1].scrollIntoView({
                            behavior: 'smooth',
                            block: 'end',
                            inline: 'end'
                        })   
                    })
                } catch (error) {
                    console.log('scrollChatMessageBotton')
                    console.log(error)
                }
            })
        }

上面的filter可以只限制到聊天室的图片上面

--END--