延遲加載

懶加載的做用:爲了提高用戶體驗

當網頁中的資源(css,img)不少狀況下是須要的全部資源下載完成後再顯示網頁,等待時間過長。

須要將暫時不顯示在視口範圍內的圖片不加載當滾動條到視口的範圍再加載

思路:首先給img設置一個自定義屬性節點。

1.例如<img    data-src='圖片路徑'>  src=''原src的屬性能夠設置一個加載動畫圖片.css

2.給document添加onscroll事件,獲取scrollTop屬性,即瀏覽器滾動條已滾動的高度,獲取img的offsetTop屬性值.瀏覽器

3若是scrollTop>offsetTop,說明<img>須要顯示了動畫

4.使用js將src屬性值替換data-src屬性值spa

相關文章
相關標籤/搜索