懒加载和预加载的实现和区别

懒加载

1、什么是懒加载？
懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

2、为什么要使用懒加载？
很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。

3、懒加载的原理是什么？
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

4、懒加载的实现步骤？
方法一：第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
方法二：是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
方法三：可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

5、懒加载的意义？
页面加载速度快、可以减轻服务器的压力、减少请求数或延迟请求数

6、代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <title>lazyload</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
        }

        .layout {
            margin: 0 auto;
            width: 1000px;
        }

        .lazyload img {
            width: 300px;
            height: 400px;
        }

        .img-ct {
            margin-left: -50px;
            overflow: auto;
        }

        .item {
            float: left;
            margin-left: 50px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<div class="lazyload">
    <div class="layout">
        <ul class="img-ct">
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="../images/a.jpg" src="../images/loading.gif"></a>
            </li>
        </ul>
    </div>
</div>


<script type="text/javascript">
    var lazyLoad = (function () {
        var clock;

        function init() {
            $(window).on("scroll", function () {
                if (clock) {
                    clearTimeout(clock);
                }
                clock = setTimeout(function () {
                    checkShow();
                }, 1200);
            })
            checkShow();
        }

        function checkShow() {
            $(".lazyload img").each(function () {
                var $cur = $(this);
                if ($cur.attr('isLoaded')) {
                    return;
                }
                if (shouldShow($cur)) {
                    showImg($cur);
                }
            })
        }

        function shouldShow($node) {
            var scrollH = $(window).scrollTop(),//现在滚动条的高度
                winH = $(window).height(),//每张窗口的高度
                top = $node.offset().top;//offsetTop 始终指向相对于其定位的祖辈元素的坐标的高度，是固定的，无论祖先元素 是否滚动  ps:(意思就是这个元素自己没有滚动条 他的祖先元素有滚动条，)
            if (top < winH + scrollH) {
                //如果当前的高度小于滚动条和窗口的高度的和就加载图片
                return true;
            } else {
                return false;
            }
        }
        //赋值实现加载图片
        function showImg($node) {
            $node.attr('src', $node.attr('data-img'));
            $node.attr('isLoaded', true);
        }

        return {
            init: init
        }
    })()
    lazyLoad.init();
</script>
</body>
</html>

预加载

1、什么是预加载？
提前加载图片，当用户需要查看时可直接从本地缓存中渲染

2、为什么要使用预加载？
图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

3、实现预加载的方法有哪些？
方法一：用CSS和JavaScript实现预加载
方法二：仅使用JavaScript实现预加载
方法三：使用Ajax实现预加载

4、预加载的意义
牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

5、代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title></title>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>

</head>
<body>
<div class="box">
    <div> 1111</div>
</div>
<script type="text/javascript">
    function loadImage(url, callback) {
        var img = new Image();
        img.onload = function () {
            img.onload = null;
            callback(img);
        }
        img.src = url;
    }

    function call(img) {
        $(img).appendTo('.box');
    }

    // loadImage('http://www.appelsiini.net/projects/lazyload/img/viper_1.jpg',call);
    loadImage('../images/a.jpg', call);
    loadImage('../images/b.jpg', call);
    loadImage('../images/c.jpg', call);
    loadImage('../images/d.jpg', call);

</script>
</body>
</html>

懒加载和预加载的实现和区别

懒加载

预加载

猜你喜欢