提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说。
懒加载的要点如下:
1.图片进入可视区域之后请求图片资源;
2.对于电商等图片较多,页面很长的业务场景很适用;
3.可以减少无效资源的加载;
4.并发加载的资源过多会阻塞js的加载,影响网站的正常使用;
如何实现懒加载呢?要点就是html中img标签src属性为空,给一个data属性,里面存放图片真实地址,在需要的时候,动态的将这个地址赋予图片src属性。
<img src="" class="image-item"lazyload="true" data-original="http://pic26.nipic.com/2.jpg"/>
当需要时,用js脚本控制图片的加载:
varviewHeight = document.documentElement.clientHeight // 可视区域的高度
functionlazyload () {
// 获取所有要进行懒加载的图片
var eles =document.querySelectorAll('img[data-original][lazyload]')
Array.prototype.forEach.call(eles, function(item, index) {
var rect
if (item.dataset.original === '')
return
rect = item.getBoundingClientRect()
// 图片一进入可视区,动态加载
if (rect.bottom >= 0 && rect.top< viewHeight) {
!function () {
var img = new Image()
img.src = item.dataset.original
img.onload = function () {
item.src = img.src
}
item.removeAttribute('data-original')
item.removeAttribute('lazyload')
}()
}
})
}
// 首屏要人为的调用,否则刚进入页面不显示图片
lazyload()
document.addEventListener('scroll',lazyload)
预加载的核心要点如下:
1.图片等静态资源在使用之前的提前请求;
2.资源后续使用时可以从缓存中加载,提升用户体验;
3.页面展示的依赖关系维护(必需的资源加载完才可以展示页面,防止白屏等);
实现预加载主要有三个方法:
1.html中img标签最初设置为display:none;
2.js脚本中使用image对象动态创建好图片;
3.使用XMLHttpRequest对象可以更加精细的控制预加载过程,缺点是无法跨域:
varxmlhttprequest = new XMLHttpRequest();
xmlhttprequest.open("GET",src,true);
关心一下dataset:http://www.zhangxinxu.com/wordpress/2011/06/html5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E5%AF%B9%E8%B1%A1dataset%E7%AE%80%E4%BB%8B/
转载自:https://www.cnblogs.com/Cathamerst/p/7445715.html