图片预加载和懒加载（附上一个小demo瀑布流）
站长
· 阅读数 1
图片预加载
图片预加载就是在页面真正渲染一张图片时，先模拟一个图片（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的累加操作；