html中的圖像動態加載問題

首先要說明下文檔加載完成是什么概念

一個頁面http請求訪問時，瀏覽器會將它的html文件內容請求到本地解析，從窗口打開時開始解析這個document，頁面初始的html結構和里面的文字等內容加載完成 + 圖片標簽及樣式文件中的引用的圖片加載完成（多媒體內容類似）大致為document加載完成的時間，我們在引入的js文件中動態改變（如增加）圖片的操作不計為document的加載時間。
如下圖：


紅線右邊的圖片資源是在頁面初始時請求服務器動態加載進來的，它不在document完成時紅線標志的范圍以內。

動態請求圖片加載有哪些影響？

瀏覽器加載圖片資源是一個等待事件，同ajax訪問，document加載一樣。
我們知道javascript是非阻塞式的執行代碼，它會跳過等待事件執行后面的代碼，這就意味着在圖片資源加載的等待事件中你捕捉不到相應的圖片dom元素，因為執行時圖片還未加載進來。

我們怎么處理這種情況？

瀏覽器為了解決等待事件的弊端，為每種等待事件都會設置一個事件完成時的回調函數，以便於開發者能對等待加載進來的內容加以操作。以動態加載圖片為例，瀏覽器中有一個類為Image,我們可以通過該類new出一個 dom元素,代碼如下：

                       var img = new Image();
                       img.src = './img/demo.png';
                       img.onload = function () {    
                       console.log(this);                    
                        }

這樣一個圖片資源就被加載進來了，並且可以對其進行操作。