圖片載入完執行的事件
阿新 • • 發佈:2018-12-10
工作中遇到個是關於聊天框的滾屏問題,
問題是圖片還沒有載入完滾屏的高度已經出來了,會造成滾屏失效的問題,
所以想到等圖片載入完成後再執行下滾屏事件這樣就可以解決了這個問題。程式碼如下:
$msgItem.find('img').load(function(e){//$msgItem是聊天的每條訊息 裡面可能有圖片也可能沒有圖片 e.stopPropagation(); $('#chat-message-wrap').mCustomScrollbar('update'); $('#chat-message-wrap').mCustomScrollbar("scrollTo", "bottom"); });
來看看e.stopPropagation();之前不是很明白它的用法,百度了下有個大神解釋的還不錯,所以就記下來了。
//# 假設你給一個div設定了hover事件,事件裡包括的function所執行的事件要2秒左右才能執行完一次,但你在這兩秒裡可以hover很多次,電腦就會累計下來,即使你後面滑鼠移開了,電腦也會繼續執行,直到全部執行完,但你要是加上了stopPropagation,當你的滑鼠一一開div,事件就會立即終止,不會你什麼都不幹,電腦還在執行程式,提高了使用者體驗
#//
看到它的解釋後突然想到自己曾經也遇到過類似與這裡例子的需求。