CSS懶加載是一項網頁性能優化技術,其作用是在頁面加載時延遲(或者不加載)加載CSS文件,從而縮短頁面加載時間。
進行CSS懶加載需要以下步驟:
// 1、將需要懶加載的CSS文件儲存在一個數組中
let lazyStyles = ['./style.css', './responsive.css'];
// 2、使用JavaScript創建一個link標簽,將其href屬性設置為需要懶加載CSS文件的路徑
let link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = lazyStyles[0];
// 3、將link標簽插入到head標簽中
document.head.appendChild(link);
// 4、使用JavaScript監聽頁面滾動事件,并且判斷當滾動到需要懶加載的CSS文件時,再將其插入到head標簽中
let lazyLoadCss = function() {
if (lazyStyles.length > 0) {
let scrollTop = window.pageYOffset;
let maxHeight = window.innerHeight + scrollTop;
let styles = document.querySelectorAll('link[rel="stylesheet"]');
for (let i = 0; i < lazyStyles.length; i++) {
if (maxHeight >= 3000 && !styles[i]) {
link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = lazyStyles[i];
document.head.appendChild(link);
}
}
}
};
window.addEventListener('scroll', lazyLoadCss);
以上就是CSS懶加載的使用方法,通過對需要加載的CSS文件進行延遲加載,可以大大減少網頁加載時間,提高用戶體驗。