【Web性能】懒加载与预加载

懒加载

图片进入可视区域之后请求图片资源
对于电商等图片很多，页面很长的业务场景适用
减少无效资源的加载
并发加载的资源过多会阻塞js的加载，影响网站的正常使用

img-src，data-url真实地址

预加载

图片等静态资源在使用之前的提前请求
资源使用到时能从缓存中加载，提升用户体验
页面展示的依赖关系维护

1.懒加载
当我们的图片进入可视区，去请求资源
需要去监听scroll事件，在scroll事件的回调中，去判断我们的懒加载的图片是否在可视区

上边缘top小于手机屏幕height的时候，就开始加载。

//懒加载代码实现
var viewHeight = document.documentElement.clientHeight // 可视区域的高度

function lazyload() {
    // 获取所有要进行懒加载的图片
    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)

2.预加载

1.使用HTML标签

<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>

2.使用Image对象

<script src="./myPreload.js"></script>

//myPreload.js文件
var image= new Image()
image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"

3.使用XMLHttpRequest对象,虽然存在跨域问题，但会精细控制预加载过程

var xmlhttprequest=new XMLHttpRequest()；
xmlhttprequest.onreadystatechange=callback；
xmlhttprequest.onprogress=progressCallback；
xmlhttprequest.open("GET","http://image.baidu.com/mouse,jpg",true）；
xmlhttprequest.send()；
function callback(){
if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
var responseText=xmlhttprequest.responseText；
}else{
 console.log("Request was unsuccessful:"+xmlhttprequest.status）；
}
}
function progressCallback(e){
e=e || event；
if(e.lengthComputable){
console.log("Received"+e.loaded+"of"+e.total+"bytes")
}
}

4.使用PreloadJS库

//使用preload.js
var queue=new createjs.LoadQueue()；//默认是xhr对象，如果是new createjs.LoadQueue(false)是指使用HTML标签，可以跨域
queue.on("complete",handleComplete,this);
queue.loadManifest([
{id:"myImage",src:"http://pic26.nipic.com/20121213/6168183  0044449030002.jpg"},
{id："myImage2"，src:"http://pic9.nipic.com/20100814/2839526  1931471581702.jpg"}
])；

function handleComplete(){
  var image=queue.getResuLt("myImage");
  document.body.appendChild(image);
}

总结：
对于懒加载和预加载的选择，其实本质是为了控制加载时机，平衡资源的加载能力。
如果当时处于比较忙的情况，应该选择延时加载,如果比较空闲，可以选择预加载，主要还是要权衡浏览器加载的能力。

【Web性能】懒加载与预加载

猜你喜欢