㈠ app如何載入背景圖片
javascript圖片預載入和延時載入的區別主要體現在圖片傳輸到客戶端的時機上,都是為了提升用戶體驗的,延時載入又叫懶載入。
兩種技術的本質:兩者的行為是相反的,一個是提前載入,一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用,預載入則會增加伺服器前端壓力。
預載入:提前載入圖片,當用戶需要查看時可直接從本地緩存中渲染。
實現方式: 可以用CSS(background)、JS(Image)、HTML(<img />)都可以。常用的是new Image();設置其src來實現預載,再使用onload方法回調預載完成事件。只要瀏覽器把圖片下載到本地,同樣的src就會使用緩存,這是最基本也是最實用的預載方法。當Image下載完圖片頭後,會得到寬和高,因此可以在預載前得到圖片的大小(方法是用記時器輪循寬高變化)。
懶載入:主要目的是作為伺服器前端的優化,減少請求數或延遲請求數,一些圖片非常多的網站中非常有用,在瀏覽器可視區域外的圖片不會被載入,直到用戶將頁面滾動到它們所在的位置才載入,這樣對於含有很多 圖片的比較長的網頁來說,可以載入的更快,並且還能節省伺服器帶