延迟加载+滚动事件

发表于

图片的延迟加载;

  1. img的src属性会去默认加载src对应的资源，当图片已经完全进入到可是窗口内再去加载这张图片。=》当图片完全进入窗口内再给img的src属性赋值
    • 如何判断图片是否已经完全进入到窗口内
    • window的clientHeight+window的scrollTop的值>img元素相对于body的上偏移量.的时候，img元素则进入window的可是窗口内
    • 获取设置img的src-》img.src=;

  2. onload事件的应用(用于测试src地址是否能加载)：

    1
    2
    3
    4
    5
    6
    7
    var tempImg=document.createElement('img');//创建一个临时图片
              tempImg.src=img.getAttribute('real');
              tempImg.onload=function(){//只要图片的src被赋值就会立刻去加载资源，当加载成功就会触发onload事件
                  img.src = img.getAttribute('real');//this.src  304
                  fadeInt(img);
              }

  3. fadeInt(ele):淡入效果的实现

    • 设置ele的css中opacity的值为0;
    • 利用定时器迭代opacity的值;
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      function fadeInt(ele) {
              ele.timer = window.setInterval(function () {
                  var opa = utils.getCss(ele, 'opacity');//获取当前ele的透明度样式
                  if (opa >= 1) {
                      window.clearInterval(ele.timer);
                      return;
                  }
                  opa += 0.01;
                  utils.setCss(ele, 'opacity', opa);
              }, 10);
          }

注意：

  1. 加载图片时只加载一次就好，通过表示变量来优化性能
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //在事件的开始进行判断，该时间是否发生过
    if (img.isLoaded) {
              return;
          }
          //给元素所绑定的事件末尾设置
          img.isLoaded = true
          //表示该事件已经发生过

onscroll：代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body, img {
            width: 100%;
        }
        a.btn {
            text-decoration: none;
            color: #ffffff;
            display: none;
            width: 40px;
            height: 40px;
            font-size: 12px;
            text-align: center;
            background: blue;
            position: fixed;
            bottom: 100px;
            left: 100px;
            line-height: 40px;
        }
    </style>
</head>
<body>
<img src="1.png" alt="">
<img src="1.png" alt="">
<img src="1.png" alt="">
<img src="1.png" alt="">
<a class="btn" href="javascript:;">顶</a>
</body>
</html>
<script src="utils.js"></script>
<script>
    var btn = document.getElementsByClassName('btn')[0];
    var a = true;
    window.onscroll = fn;
    function fn() {
        if (a) {
            var scrollTop = utils.win('scrollTop'); //在滚动的过程中不断的去获取滚出去的高度，判断这个高度是否超过了一个屏的高度。如果超过按钮出现
            var winHeight = utils.win('clientHeight');
            if (scrollTop >= winHeight) {
                utils.setCss(btn, 'display', 'block');
            } else {
                utils.setCss(btn, 'display', 'none');
            }
        }
        btn.onclick = function () {
            //每次点击都会启动换一个定时器，这样就有可能同时存在多个定时器同时工作。效果就是越点击越快。所以每次点击开始无论上一次定时器是够到达终点都要把上一次的定时器清掉
            this.style.display = 'none';
            window.clearInterval(btn.timer);
            btn.timer = window.setInterval(function () {
                var curScrollTop = utils.win('scrollTop');
                if (curScrollTop <= 0) {
                    a = true;
                    window.clearInterval(btn.timer);
                }
                curScrollTop -= 5;
//                debugger;
                utils.win('scrollTop', curScrollTop);
            }, 1);
            a = false;//由于定时器在滚动条回到顶部的过程中又触发了window.onscroll事件。又把按钮显示出来了。=》当点击事件发生之后让window.onscroll事件移除
        };
    }
    //异步：ajax 定时器 事件 回调函数
    //事件拦截：借助第三方变量，然后不断去修改一个条件。当事件触发的时候这个条件作为是否执行的代码的依据=》开关
</script>