JS 预加载(Pre Load) 与 懒加载(Lazy Load)

前端页面进行浏览页面时都会发生加载的行为，其中又可分为预加载和懒加载。

  1.预加载：顾名思义，预加载就是在你还没有看到的地方就已经开始加载，好处就是极大的提高了用户的使用体验，但是不好的是会增加流量的消耗，而且会增加前端的压力等。

  2.懒加载：懒加载的主要目的是优化前端性能，减少请求数或延迟请求数。可以延迟加载，可视区域加载，或者说利用定时器进行延迟加载。但是可能会加载缓慢，页面显示延迟等。

接下来让大家更直观地看到这个区别

预加载(Pre Load) 

    <script type="text/javascript">  
            var images = new Array()  
            function preload() {  
                for (i = 0; i < preload.arguments.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
            }  
            // 图片文件路径，也可以是网络文件
            preload(  
                "../image/image-001.jpg",  
                "../image/image-002.jpg",  
                "../image/image-003.jpg"  
            )  
    </script>  

也可以写一个自动进行自动获取图片的方法（Jquery）

//引入文件是必须的
<script src="https://cjzyx.oss-cn-beijing.aliyuncs.com/js/jquery.imgpreload.min.js"></script>
<script>
        function loading() {
            jQuery.imgpreload(load_img, {
                each: function () {
                    var status = $(this).data("loaded") ? "succcess" : "error";
                    var src = $(this).attr('src')
                    if (status == 'successs') {
                        load_img_progress++;
                        var percent = Math.ceil(load_img_progress / load_img_total * 100);
                        $('#progress').text(percent + "%")
                    }
                },
                all: function () {
                    $('#loader').fadeOut(1000);
                    $("#app").show();
                    swiper()
                    setTimeout(function () {
                        $('#loader').remove()
                    }, 1200)
                }
            })
        }
        var load_img = [];
        load()

        function load() {
            $("img").each(function () {
                var url = $(this).attr("src")
                load_img.push(url)
            })
            $("div").each(function () {
                var url = $(this).css("background-image");
                if (url != undefined && url != "none") {
                    url = url.split('"');
                    if (url[1] == undefined) {
                        src = url[0]
                        src = src.split(4, -1)
                    } else {
                        src = url[1]
                    }
                    load_img.push(src)
                }
            })
            return loading(load_img)
        }
        var load_img_progress = 0;
        var load_img_total = load_img.length
    </script>

Ajax请求的时候进行预加载

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

懒加载(Lazy Load)

 实现懒加载思路就会更加清晰，咱们只需要对看见的地方进行加载，看不见的不进行加载，所以就需要获取到当前页面的位置。从而进行下一步的操作。

//页面加载时先调用一次loadPage函数
loadPage()
window.onscroll = function () {
   loadPage()
}
//封装 加载方法
function loadPage() {
    var viewHeight = document.documentElement.clientHeight;
    var viewTop = document.documentElement.scrollTop || document.body.scrollTop;
    //这里我获取的是类名，可以根据页面改为直接获取img
    //注意获取的元素要有自己的宽高，不然会直接加载整个页面的所有图片，功能也就失效了
    var img = document.getElementsByClassName("img_pdf");
    for (var i = 0; i < img.length; i++) {
       if (offsetTop1(img[i]) < (viewHeight + viewTop)) {
           var src = img[i].getAttribute("data-url");
           //赋值
           img[i].src = src;
        }
     }
 }

//封装获取元素离上方的高度的函数
 function offsetTop1(obj) {
    var t = obj.offsetTop;
    while (obj.offsetparent) {
        obj = obj.offsetparent;
        t = t + obj.offsetTop;
    }
    return t;
 }

这样页面向下滚动下面会开始加载，当停止滚动的时候页面也就不加载了，极大的节省了流量的消耗。

今天简单的说了一下这两个加载的方式，有变更还会补充。