IntersectionObserver可以動(dòng)態(tài)監(jiān)聽(tīng)元素是否在當(dāng)前窗口可視范圍內(nèi)喇喉,但不兼容ie返劲,建議大家合理應(yīng)用
git地址:https://github.com/smileLiMingWei/resource/blob/master/%E5%8A%9F%E8%83%BD/imgLazyLoading.html
let?img?=?document.getElementsByTagName("img")
??//注意:此方法不兼容ie
??//IO是瀏覽器內(nèi)置的一個(gè)API,可以用它實(shí)現(xiàn)監(jiān)聽(tīng)當(dāng)前元素是否在視口內(nèi)
??const?observer?=?new?IntersectionObserver((changes)?=>?{
????for?(let?i?=?0,len?=?changes.length;i<len;i++)?{
??????let?change?=?changes[i]
??????if?(change.isIntersecting)?{//返回一個(gè)布爾值儡率,表示當(dāng)前是否相交
????????const?imgElement?=?change.target
????????imgElement.src?=?imgElement.getAttribute("data-scr");
????????observer.unobserve(imgElement);//停止觀察此節(jié)點(diǎn)
??????}
????}
??})
??img?=?[...img]
??img.forEach(element?=>?{
????observer.observe(element)//observe只能接收一個(gè)節(jié)點(diǎn)信息
??});