前端性能优化中图片资源的优化。
1.懒加载（延迟加载）
1.图片进入可视区域之后请求图片资源；
2.对于电商等图片较多，页面很长的业务场景很适用；
3.可以减少无效资源的加载；
4.并发加载的资源过多会阻塞js的加载，影响网站的正常使用；
懒加载的要点就是img标签src属性为空（占位图），给一个data属性，里面存放图片真实地址，在需要的时候，js动态的将这个地址赋予图片src属性。
如下所示：
<img src="" class="image-item" lazyload="true" data-original="/1213/6168183_004444903000_2.jpg" />
类似上述代码所示，当需要时间，用js脚本控制图片的加载：
var viewHeight = document.documentElement.clientHeight // 可视区域的高度function lazyload () {// 获取所有要进行懒加载的图片var eles = document.querySelectorAll('img[data-original][lazyload]')//document.querySelectorAll(selector);返回与指定的选择器组（selector）匹配的文档中的元素列表；Array.prototype.forEach.call(eles, function (item, index) {var rectif (item.dataset.original === '')returnrect = item.getBoundingClientRect()// 图片一进入可视区，动态加载if (rect.bottom >= 0 && rect.top < viewHeight) {!function () {var img = new Image()img.src = item.dataset.originalimg.onload = function () {item.src = img.src}item.removeAttribute('data-original')item.removeAttribute('lazyload')}()}})}// 首屏要人为的调用，否则刚进入页面不显示图片lazyload()document.addEventListener('scroll', lazyload)
懒加载的优点
页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好
2.预加载
预加载的核心要点如下：
1.提前加载图片,用户需要查看时从缓存中渲染；
3.对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验；
实现预加载主要有三个方法：
/86785/
1.html中img标签最初设置为display:none；
2.js脚本中使用image对象动态创建好图片；
3.使用XMLHttpRequest对象可以更加精细的控制预加载过程，缺点是无法跨域：
var xmlhttprequest = new XMLHttpRequest(); xmlhttprequest.open("GET",src,true);
如果觉得《懒加载与预加载》对你有帮助，请点赞、收藏，并留下你的观点哦！
