当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    基于纯JS实现多张图片的懒加载Lazy过程解析

    栏目:代码类 时间:2019-11-08 21:01

    一、效果图如下

    上面的效果图,效果需求如下

    1、还没加载图片的时候,默认显示加载图片背景图

    2、刚开始进入页面,自动加载第一屏幕的图片

    3、下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背景图

    4、加载图片的时候,有渐进显示图片效果

    二、难点

    1)如何Ajax请求数据

    2)如何动态将json数据绑定到html中。

    3)如何通过对图片的定位计算,触发图片懒加载机制

    4)加分项,显示图片时有渐现的过渡动画

    三、前期知识点

    1)Ajax相关知识,XMLHttpRequest对象,所有现代的浏览器都支持此对象。

    2)innerHTML,数据绑定使用字符串拼接的方式

    3)HTML DOM getAttribute() 方法,返回自定属性名的属性值(主要是用于返回自定义属性的属性值)

    4)图片的 onload事件,当图片的src属性的属性值为正确(即能成功加载图片),才能触发图片的onload事件

    四、难点逐一攻破

    1)如何Ajax请求数据

    分四步走

    // 1)首先创建一个Ajax对象
    var xhr = new XMLHttpRequest;
    // 2)打开我们需要请求的数据的那个文件地址
    // URL地址后面加随机数目的:清除每一次请求数据时候(get请求)产生的缓存
    // 因为每次访问的地址不一样,样浏览器就不会尝试缓存来自服务器的响应,读取本地缓存的数据。
    xhr.open('get', 'json/newsList.txt?' + Math.random(), false); // false代表同步
     // 3)监听请求的状态
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
        var val = xhr.responseText;
        jsonData = utils.jsonParse(val);
      }
    }
    // 4)发送请求
    xhr.send(null);

    2)如何动态将json数据绑定到html中。

    字符串拼接的方式(数据绑定中最常用的方式),即通过使用innerHTML,对页面元素进行字符串拼接,再重新渲染到页面中

    var str = "";
    if (jsonData) {
      for (var i = 0, len = jsonData.length; i < len; i++) {
        var curData = jsonData[i];
        str += '<li>';
        str += '<div><img src="" trueImg="' + curData["img"] + '"></div>';
        str += '<div><h2>' + curData["title"] + '</h2>';
        str += '<p>' + curData["desc"] + '</p>';
        str += '</div>';
        str += '</li></div>';
      }
      news.innerHTML += str;
    } <strong> </strong>

    优势:数据绑定最常用的方式,因为浏览器只需要渲染一次(所有模板引擎数据绑定的原理就是字符串拼接,vue、angular、jade、kTemplate.js等等)

    事先把内容拼接好,最后统一添加到页面中,只引发一次回流

    弊端:我们把新凭借的字符串添加到#ul1中,原有的三个li的鼠标滑过效果都消失了(原来标签绑定的事件都消失了)
    原来,oUl.innerHTML的作用是把原来的标签以字符串的方式取出,原来作为标签的时候,对应事件绑定的东西已经没有了,然后进行字符串拼接,

    但是,拼接完成之后,还是字符串!最后再把字符串统一添加到页面中,浏览器还需要把字符串渲染成为对应的标签

    3)如何通过对图片的定位计算,触发图片懒加载机制(最关键点)

    思路:

    A:代表图片距离屏幕顶部的距离

    下一篇:没有了