web优化之懒加载和预加载

懒加载和预加载是常用的web优化的手段。所以我们首先应该明白什么是懒加载和预加载。
懒加载:懒加载也加延迟加载,延迟加载网络资源或符合某些条件时才加载资源。常见的就是图片延时加载。
懒加载的意义:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
懒惰实现方式:
1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。
说了这么多,上代码:

//javascript
<script type="text/javascript">
window.onload = function(){
    var imgs = Array.from(document.querySelectorAll('img'));
    delay();
    window.addEventListener('scroll', exec(delay, 4000));

    function exec(fun, delaytime){
         var timeout,startTime = new Date();
        return function(){
            clearTimeout(timeout);
            tiemout = setTimeout(fun, delaytime);
        }
    }

    function delay(){
        var scrollTop = window.scrollY;
        var clientHeight = document.documentElement.clientHeight;
        //console.log(clientHeight);
        imgs.forEach((item, index)=>{
            if(scrollTop==0 && item.offsetTop<=clientHeight+scrollTop){
                //console.log(item.getAttribute('data_img'));
                item.setAttribute('src',item.getAttribute('data_img'));
            }else if(item.offsetTop<=clientHeight+scrollTop && item.offsetTop > scrollTop){
                item.setAttribute('src',item.getAttribute('data_img'));
            }
        });
    }
}
</script>

从demo的js里面我们可以看出,我们在页面滚动上添加了事件。页面初次加载显示时只会显示页面可视区域的图片,当页面滚动到可视区域后才会加载图片显示图片,如图所示:




两张图可以看出首页加载只显示了两张图片,当向下滚动时继续加载了后边的图片。

预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。
两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。预加载应用如广告弹窗等。

//
var target = document.getElementById('test');
addImg('./2.jpg');
function addImg(url){
    var img = document.createElement('img');
    var image = new Image();
    image.src=url;
    image.onload = function(){
        img.src = this.src;
                img.height = 50;
                img.width = 50;
    }
    target.appendChild(img);
}
//html
<div id="test"></div>

仅以以上两个小列子学习预加载和懒加载。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者

推荐阅读 更多精彩内容