關於分屏加載圖片,像天貓、京東等電商圖片較多頁面很長,就采用了延遲加載技術。
目前很流行的做法就是滾動動態加載,顯示屏幕之外的圖片默認是不加載的,
隨着頁面的滾動,顯示區域圖片才被動態加載。
原理其實很簡單,默認<img>標簽中設置一個特別小的讓人看不見的圖片作為原始src路徑,
再自定義一個屬性存放原圖片路徑,通過綁定滾動事件,檢查當前元素是否在瀏覽器窗口中,
然后替換src路徑動態加載圖片。
找了幾個jquery插件都不太好用,kissy沒用明白。
最后發現了一個大神寫的jQuery滾動加載插件scrollLoading測試很好用。
再這里分享下~