懶加載就是在資源進(jìn)入可視區(qū)域之后再加載
- 頁面可視區(qū)高度： clientHeight = window.innerHeight
- 元素在頁面中的位置： rect = el.getBoundingClientRect()
- 如果頁面在可視區(qū)域： rect.top < clientHeight && rect.bottom
預(yù)加載揍愁，就是在資源進(jìn)入可視區(qū)域之前完成加載
- 用css隱藏此標(biāo)簽仓技，做提前加載: display： none;
- 使用js的方式，優(yōu)先使用這種方式
const img = new Image() console.log('run') // onload script 頁面結(jié)束加載之后觸發(fā)。 img.onload = function(e) { alert('image loaded') } img.src = 'https://www.baidu.com/img/bd_logo1.png?where=super' - 使用XMLHttpRequest,
- 可以更好的控制整個加載的過程
- 存在跨域問題
- PreloadJS 庫， 已經(jīng)幫助實(shí)現(xiàn)了懶加載和預(yù)加載。 原理就是上述三種方式
