js-画像のロードが完了したかどうかを判断する.

1315 ワード

チャットルームを作る時、写真があれば最後までスクロールしません.この時の画像はまだ読み込まれていません.チャット画像のロードが完了したかどうかを判断する必要があります.

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--

)selectタグ2級関連