阅读 2330

图片预加载和懒加载(附上一个小demo瀑布流)

图片预加载

图片预加载就是在页面真正渲染一张图片时,先模拟一个图片(new Image()),让它去服务器请求要加载的图片路径,请求完成之后把路径给真正html页面上的图片的src路径;然后再把新创建的图片清除了(形象点说:那个新创建的图片相当于一个跑腿小弟,办完事之后就被杀了,hahhahah~~~)

 let realSrc = ele.getAttribute('realSrc');
 let temp = new Image();
 temp.src = realSrc;
 temp.onload = function () {
    ele.src = realSrc;
 }
 temp = null;
复制代码

图片懒加载

在浏览器渲染图片页面之前先用一个默认的图片代替,当那个图片显示到页面某个位置的时候再换成真正的图片

//图片露出一半的时候,把图片地址换成真实地址,显示真实图片,其他时候显示默认图片
function loadImg(ele) {
        if (ele.flag) return;
        let scT = document.documentElement.scrollTop || document.body.scrollTop; //卷去的高度
        let wH = winH().h; //一屏幕路的高度
        let t = offset(ele).t; //当前元素到body 的偏移量
        let h = ele.clientHeight
        if (scT + wH > t + h / 2) {
            //说明图片露出一半
            console.log(666)
            ele.flag = true;
            // ele.src = '1.jpg';
            //图片预加载
            let temp = new Image();
            temp.src ='1.jpg';
            temp.onload = function () {
                //这张图片加载完成之后会触发该函数
                ele.src = temp.src;
                fadeIn(ele);//执行图片渐现效果
                temp = null;
            }
        }
    }
//让图片慢慢的显示出来 ,也就是控制透明度
function fadeIn(ele) {
        //让图片的opacity从0到1;
        //you are the shadow to my lift
        ele.style.opacity = 0;
        let n = 0;
        ele.timer = setInterval(() => {
            n += 0.01;
            if (n >= 1) {
                clearInterval(ele.timer);
            }
            ele.style.opacity = n;
        }, 100);
    }
复制代码

小demo:瀑布流

思想:

 1、获取数据  封装成一个函数,去实现获取数据的操作
 2、渲染数据  把从后台获取到的数据展示页面上,按照列来展示的,
    循环后台给的数组, 然后把每一条数据拼接好,添加到长度最小的那一列
    这里封装了一个获取长度最小的列的方法 getMinLi
    把元素集合转成数组, 然后按照 clientHeight 进行排序,由此找到最低的哪个li;
 3、滚动加载更多,长度最小的哪个li的底部露出来时,我们就去加载新的数据;
 loadMore方式 一次性请求多次 我们做了一个flag的判断;只有当flag为false的时候, 
 才去执行新数据的请求,当请求开始的时候
 我们把flag置为true,渲染成功 我们把flag再置为false;    
4、再加上图片懒加载的操作;loadImg   loadAll
    懒加载  就是当图片还没有出现到可视窗口的时候,不去加载图片,
    只有当图片露出来的时候  我们再去加载真正的图片
    预加载  就是 当图片要展示成真正的图片时, 先用默认图展示,
    然后再利用JS创建一个临时的图片,让这张临时的
    图片去远程请求 真正的图片, 当请求成功之后,
    再把这个真实图片的地址赋给页面上的哪个img标签
5、实现图片的渐显  fadeIn 利用定时器 对img进行 opacity的累加操作;
复制代码

代码实现

github.com/polikesen12…

文章分类
阅读
文章标签