JS懒加载

懒加载思路：

+最开始加载页面，img的src不赋值，不会加载图片,把真实图片的地址赋值给img的自定义属性，方便后期想加载真实图片的时候获取

+如果src不赋值或者加载图片是错误的，会显示碎图，所以我们最开始让img是隐藏的【可以设置display，也可以设置透明度为0（透明度改变可以设置过度效果）】

+给图片所在的盒子设置背景占位图（或者背景颜色），在真实图片没有加载之前，用其占位【盒子宽高要事先设置好】

---------------------------------------------------------------------------------------------------------------------------------

啥时候加载？

+当页面第一次渲染完（其他资源加载完成，例如：window.onload）

+把出现在当前可视窗口内的图片进行加载

---------------------------------------------------------------------------------------------------------------------------------

如何加载？

+获取图片的自定义属性值，拿到真实图片地址

+给图片的src赋值真实的地址，如果图片可以正常加载成功，则让img显示

---------------------------------------------------------------------------------------------------------------------------------

css部分

<style>

html,

body {

height: 5000px;

}

.pic-box {

box-sizing: border-box;

position: absolute;

top: 1000px;

left: 100px;

width: 600px;

height: 337px;

background: #ddd;

}

.pic-boximg {

display: block;

width: 100%;

height: 100%;

opacity: 0;

transition: opacity .1s;

}

</style>

---

JS部分

const picBox = document.querySelector('.pic-box'),

imgBox = picBox.querySelector('img');

// 图片懒加载

const lazy = function lazy(){

let tureImg=imgBox.getAttribute('data-img');

imgBox.src = tureImg;

imgBox.οnlοad=()=>{

// 图片加载成功

imgBox.style.opacity = 1;

};

// imgBox.onerror 图片加载失败

};

// 当页面其他页面资源都加载完成后，执行延迟加载

window.onload = lazy;

// setTimeout(lazy,1000); // 加个定时器模拟一下

</script>

---

第二种方法

<script>

const picBox = document.querySelector('.pic-box'),

imgBox = picBox.querySelector('img');

HTML = document.documentElement;

// 图片懒加载

const lazy = function lazy() {

let tureImg = imgBox.getAttribute('data-img');

imgBox.src = tureImg;

imgBox.onload = () => {

imgBox.style.opacity = 1;

};

// 设置自定义属性：当前图片已经处理过延迟加载了

picBox.isLoad = true;

};

// 计算何时加载

const computed = function computed() {

// 如果之前处理过，就无需再处理了

if (picBox.isLoad) return;

let C = HTML.clientHeight,

{ top: B, bottom: A } = picBox.getBoundingClientRect();

if (A <= C && B >= 0) {

lazy();

}

};

// 第一次其他资源加载完计算一次 & 页面滚动中随时计算

// + onscroll事件会在浏览器滚动条滚动时触发，并且按照浏览器最快反应时间（一般是5~7秒）进行触发，例如：我们滚动了100ms，按照5ms触发一次，一共20次，，触发频率太快，造成了没必要的计算和性能消耗

// 此时，我们需要降低触发频率，不是降低浏览器的频率，而是把computed函数执行的频率降下来，我们把此操作成为“函数节流”

window.onload = computed;

window.onscroll = utils.throttle(computed,300);

</script>