懒加载与预加载

1.概念

(1) 懒加载(延迟加载):图片延迟加载,当图片进入视口之后才加载

(2) 预加载:提前加载图片,当用户需要查看时,直接从本地缓存读取

在实际开发者中懒加载用的比较多
2.区别

二者都是提高页面性能的有效办法

区别是一个是提前加载,一个是延迟加载甚至不加载

懒加载对服务器前端有一定的缓解压力的作用,预加载则会增加服务器前端的压力

3.意义

(1) 懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

(2) 预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映

懒加载的原理

1.将页面上的图片src属性设置为空,然后将图片的真实路径存放在当前图片标签的自定义属性data-src上
2.当页面滚动的时候,需要去监听scroll事件,在scroll事件的回调中,判断我们的懒加载的图片是否进入可视区域,如果图片在可视区域就将图片的src属性设置为data-src的值,然后这样就实现延迟加载
css样式

  .image-item {
            display: block;
            margin-bottom: 50px;
            height: 200px;
            /* 一定记得设置图片高度 */
        }

body部分

 <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/f4eb114554ae8d3d11a11bf0fa436b4a.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/4a8fb03ec68c9fa2fdc95a6f40b9f781.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/4040bc0eca9d1e416fdf92c15e44b932.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/5c428b3ec1963741846e674ef27f7fe2.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/2d5a291001b0a7dcb7b41d5a990224c1.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">
    <img src="" class="image-item" lazyload="true" data-src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg">

js部分

 //获取可视区高度
    var viewHeight = document.documentElement.clientHeight;

    function lazyload() {
        var eleImgs = document.querySelectorAll('img[data-src][lazyload]');
        eleImgs.forEach(function(item, index) {
            //如果data-src属性没有值,直接返回
            if (item.dataset.src === "")
                return;
            // 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
            var rect = item.getBoundingClientRect();

            if (rect.bottom >= 0 && rect.top < viewHeight) {
                (function() {
                    var img = new Image();
                    img.src = item.dataset.src;
                    img.onload = function() {
                        item.src = img.src;
                    }
                    item.removeAttribute("data-src"); //移除属性，下次不再遍历
                    item.removeAttribute("lazyload");
                })()
            }
        })
    }
    lazyload(); //刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片
    document.addEventListener("scroll", lazyload);

预加载原理:提前加载图片,当用户需要查看时,直接从本地缓存读取
实例

  <!-- HTML -->
    <img src="https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg" style="display:none" />

    <!-- css -->
    <div class="box"></div>

    <!-- js -->
    <div class="hidden">
        <script type="text/javascript">
            var img = new Array()

            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    img[i] = new Image()
                    img[i].src = preload.arguments[i]
                }
            }
            preload(
                "https://image.ztemall.com/e96bedfde1da7fe4430015588ded9e55.jpg",
                "https://image.ztemall.com/5c428b3ec1963741846e674ef27f7fe2.jpg",
                "https://image.ztemall.com/4040bc0eca9d1e416fdf92c15e44b932.jpg"
            )
        </script>
    </div>



    <!-- AJAX -->
    <!-- 使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。 -->
    <div class="ajax">
        <script>
            window.onload = function() {
                setTimeout(function() {
                    var xhr = new XMLHttpRequest();
                    //预加载js文件
                    xhr.open('GET', 'https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js');
                    xhr.send('');
                    xhr = new XMLHttpRequest();
                    //预加载 css 文件 
                    xhr.open('GET', 'https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css');
                    xhr.send('');
                    // 预加载图片
                    new Image().src = "https://image.ztemall.com/4040bc0eca9d1e416fdf92c15e44b932.jpg";
                }, 1000);
            };
        </script>
    </div>