自动加载、懒加载和预加载

发表于 | 阅读次数

自动加载

自动加载就是符合某些条件时才加载某些图片。

现在好多的网站都用到了自动加载图片技术，比如淘宝，刚打开淘宝时，加载一部分图片，在你浏览的过程中，往下拉再加载一部分图片，再往下拉的时候再加载一部分图片。

代码实现

1
<style>
2
  *{
3
    box-sizing:border-box;
4
  }
5
  ol,ul{
6
    list-style: none;
7
    margin:0;
8
    padding:0;
9
  }
10
  #list{
11
    max-width:680px;
12
    margin:0 auto;
13
    display:flex;
14
    flex-wrap:wrap;
15
    justify-content:space-between;
16
  }
17
  #list li{
18
    width:calc(33.333333% - 10px);
19
     text-align:center;
20
  }
21
  .oneToOne{
22
    padding-top:100%;
23
    position:relative;
24
  }
25
  .oneToOne img{
26
    position:absolute;
27
    width:100%;
28
    height:100%;
29
    left:0;
30
    top:0;
31
  }
32
  .loadMore{
33
    text-align:center;
34
    margin:16px 0;
35
  }
36
</style>
37
<body>
38
    <ol id="list">
39
    </ol>
40
    <div class="loadMore">
41
        <button id="loadMoreButton">加载更多</button>
42
    </div>
43
    <script>
44
        var loadingImage = new Image();
45
        loadingImage.src="https://i.loli.net/2017/08/08/5989307b6c87b.gif";
46
        let list = document.querySelector('#list');
47
        for(var i=0;i < 9;i++){
48
            let li = document.createElement('li');
49
            let div = document.createElement('div');
50
            div.className = 'oneToOne';
51
            let image = document.createElement('img');
52
            image.src = '//via.placeholder.com/200x200?text=' + Math.random().toFixed(6);
53
            div.appendChild(image);
54
            let p = document.createElement('p');
55
            p.textContent = `这是第 ${i+1} 段话`;
56
            li.appendChild(div);
57
            li.appendChild(p);
58
            list.appendChild(li)
59
        }
60
        let loadMoreButton = document.querySelector('#loadMoreButton');
61
        let n =1;
62
        let demand = false;
63
        loadMoreButton.onclick = function(){
64
            if(demand){return}
65
            let request = new XMLHttpRequest();
66
            request.open('GET',`./page-${n+1}.json`);
67
            request.onerror = function(){
68
                demand = false
69
            };
70
            request.onload =function(){
71
                demand = false;
72
                n +=1;
73
                let response = request.responseText;
74
                let data = JSON.parse(response);
75
                for(var i=0;i < data.content.length;i++){
76
                    let liString = `
77
                        <li>
78
                            <div class="oneToOne">
79
                                <img src="https://i.loli.net/2017/08/08/5989307b6c87b.gif" data-xxx="${data.content[i].url}">
80
                            </div>
81
                            <p>${data.content[i].text}</p>
82
                        </li>`;
83
                    list.insertAdjacentHTML('beforeend',liString)
84
                }
85
                if(data.hasNextPage === false){
86
                    loadMoreButton.disabled = true;
87
                    loadMoreButton.textContent ="看完了"
88
                }
89
            };
90
            demand = true;
91
            request.send()
92
        };
93
        window.onscroll = function(){
94
            var doc = document.documentElement;
95
            var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
96
            var clientHeight = doc.clientHeight;
97
            var viewportOffset = loadMoreButton.getBoundingClientRect();
98
            var buttonTop = viewportOffset.top;
99
            if( buttonTop <= clientHeight){
100
                loadMoreButton.click()
101
            }
102
        }
103
    </script>
104
</body>
105
// JSON
106
    {
107
    "content":[
108
        {"url":"//via.placeholder.com/200x200?text=0.145596","text":"这是第 10 段话"},
109
        {"url":"//via.placeholder.com/200x200?text=0.186863","text":"这是第 11 段话"},
110
        {"url":"//via.placeholder.com/200x200?text=0.102256","text":"这是第 12 段话"},
111
        {"url":"//via.placeholder.com/200x200?text=0.156688","text":"这是第 13 段话"},
112
        {"url":"//via.placeholder.com/200x200?text=0.120045","text":"这是第 14 段话"},
113
        {"url":"//via.placeholder.com/200x200?text=0.132079","text":"这是第 15 段话"},
114
        {"url":"//via.placeholder.com/200x200?text=0.158627","text":"这是第 16 段话"},
115
        {"url":"//via.placeholder.com/200x200?text=0.132366","text":"这是第 17 段话"},
116
        {"url":"//via.placeholder.com/200x200?text=0.146998","text":"这是第 18 段话"}
117
    ],
118
    "hasNextPage":true
119
}

顺便学习了 Flex 布局，图片实现等比例缩放。

什么是懒加载

懒加载就是延迟加载图片或符合某些条件时才加载某些图片。

懒加载的原理是什么

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-xxx”属性里，要用的时候就取出来，再设置；

懒加载就是在自动加载的基础上，增加了下面的代码。

1
window.onscroll = function(){
2
  var images =document.querySelectorAll('img[data-xxx]');
3
  for (var i=0;i<images.length;i++){
4
    var imagesviewportOffset =images[i] .getBoundingClientRect();
5
    var imagesTop = imagesviewportOffset.top;
6
    if( imagesTop <= clientHeight){
7
      images[i].src = images[i].getAttribute('data-xxx');
8
      images[i].removeAttribute('data-xxx')
9
    }
10
  }
11
}

什么是预加载

提前加载图片，当用户需要查看时可直接从本地缓存中渲染

预加载实现有两种方法

1
var loadingImage = new Image();
2
loadingImage.src="images/big.jpg";
1
<link rel="prefetch" href="images/big.jpg">

服务器

1
npm i -g http-server
2
http-server -c-1