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);                    
                        }

這樣一個圖片資源就被加載進來了，而且能夠對其進行操做。