js手動實現簡易懶載入 LazyLoad

在網頁載入中，對於一些存在很多image的網頁，一次載入所有，會造成效能浪費，優化的方法有很多，例如base64、雪碧圖等，懶載入也是比較常見的一種效能優化的方法

給頁面中img標籤設定自定義屬性data-original,用來存放真正的img源url，給所有img的src屬性設定為一張靜態或者不設定

監聽視窗滾動scroll事件，遍歷計算是否出現在瀏覽器可視視窗內

方法一

getbound(el)

getbound(el)

返回值是乙個 domrect 物件，這個物件是由該元素的getclientrects()domrect 物件包含了一組用於描述邊框的唯讀屬性——left、top、right和bottom，單位為畫素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。

方法三（更新）

發現乙個瀏覽器的api，intersectionobserver api 使用教程

**暫未更新。。。

**基於react框架實現，使用方法二來判斷是否出現在可視區域

html

classname="lazyload"

// alt="哦豁"
data-original=""
//>
classname="lazyload"
// alt="哦豁"
data-original=""
//>
classname="lazyload"
// alt="哦豁"
data-original=""
//>
classname="lazyload"
// alt="哦豁"
data-original=""
//>
classname="lazyload"
// alt="哦豁"
data-original=""
//>

body 

img 
.img-warpper 

class lazyload 

init() )
}  load() 
getbound(el) 
loadimg(el) 
}

對於頻繁觸發的滾動事件，可以考慮函式節流和防抖，有空在分享

js實現懶載入

懶載入就是在可視區域內的影象進行載入，當下拉滾動後變載入當前可視區域的影象，該技術減緩了伺服器端的壓力，優化了使用者體驗功能。直接上 下面是我的布局 class chunji middle bar id src div1 div class chunji middle bar id src div2...

Scope 作用域 和 Lazy 懶載入

scope 調整作用域 和 lazy 懶載入 若沒有配置 lazy，或 lazy value false ioc容器啟動會呼叫方法建立物件放到ioc容器中。以後每次獲取就是直接從容器中拿。若配置了 lazy value true ioc容器啟動並不會去呼叫方法建立物件放在容器中。第一次獲取的時候才會...

JS基礎之手動實現簡易jQuery api

今天主要實現以下兩個api addclass 給指定標籤增加class settext 給指定標籤設定文字內容 textcontent 第一版用到命名空間，命名空間相當於給自己的庫乙個名字，當函式名稱衝突，不會會覆蓋掉之前的函式。var ffyjq 作用 獲取傳入的節點的兄弟節點 ffyjq.get...