1. 程式人生 > >javascript實現圖片懶載入和預載入

javascript實現圖片懶載入和預載入

所謂懶載入就是通過某些特定的條件,然後再給圖片的src賦值,常見的懶載入方式有點選載入和滾動載入。
如果是點選載入,那麼一般是通過點選事件。例如:
這裡寫圖片描述
然後新增點選事件:
這裡寫圖片描述
效果如下:
這裡寫圖片描述
如果是載入,那麼就有些複雜,首先你要先明白觸發載入的條件,一般都是文件的高度-瀏覽器窗高度-瀏覽器距離頂部的高度<規定的尺寸。達到一定條件的後,向for迴圈的圖片陣列(筆者使用的是vue)新增元素。最困難是獲取文件的高度,瀏覽器窗高度,瀏覽器距離頂部的高度。
這裡寫圖片描述
當然你要注意滾動的上下方向,如果向上的話就不需要新增元素。
圖片預載入:很簡單通過建立img元素,並將要預載入的src賦值給img元素,通過src的onload達到預載入的目的,但是此時圖片只是存在了瀏覽器,但是並沒有顯示在頁面上,通過觀察network的可以發現圖片已經載入完畢。
這裡寫圖片描述