前端女娲补天 HTML（二）什么是懒加载，什么是预加载

什么是懒加载

懒加载可以将页面上的图片src设置为空，真实路径放在data-original属性中，在图片进入可视区域后再将src设置为data-original的值。

具体实现

在DOM中获取所有懒加载图片元素。
window添加onscroll监听，遍历通知所有待加载图片，如果图片在视口内（图片离视口上边界距离image.getBoundingClientRect().top，TODO：判断元素在视口内文章链接 ）则将data-original中的路径赋给src。

懒加载的优点

提升用户体验，加快首屏渲染速度。
减少无效资源加载。
防止js资源加载过多阻塞DOM解析。

懒加载优化

使用发布订阅者模式，将懒加载图片放在订阅者数组中。在执行scroll事件时，通知订阅者数组，让在视口中的图片进行加载，如果图片已经加载，将其从订阅者数组中取出。

---

什么是预加载

预加载就是在网页全部加载前先对一些内容进行加载，浏览器会将其保存在缓存中，用户使用时直接读取缓存，减少等待时间。

预加载方法

• css：在页面外设置src为对应img的背景（不好，在页面主体加载前加载图片，影响页面主体加载）

#preload-01 { background : url (http://..../image1.jpg) no-repeat -9999px -99999px}
#preload-02 { background : url (http://..../image2.jpg) no-repeat -9999px -99999px}
#preload-03 { background : url (http://..../image3.jpg) no-repeat -9999px -99999px}

• css+js：window.onload添加预加载函数，背景图片加载（在页面加载完成后再加载图片）

 function preLoad(){
           document.getElementById('preload-01').style.background= "url(http:......) norepeat -9999px   -99999px"
}

• js：window.onload添加预加载函数，原来图片src为空，在函数中设置src
• AJAX：使用AJAX请求在window.onload提前请求图片