什么是懒加载
懒加载可以将页面上的图片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为空,在函数中设置srcAJAX:使用AJAX请求在window.onload提前请求图片