图片预加载是指在网页加载完成之前提前加载页面所需的图片资源，以提高用户体验和页面加载速度。通过图片预加载，可以在用户浏览页面时，无需等待加载完毕即可显示页面内容，减少页面闪烁和加载过程中的空白。
- 原理： 通过css或者js，先请求图片到本地，再利用浏览器的缓存机制，当要使用图片时（图片路径一致），浏览器直接从本地缓存获取图片，加快图片的加载速度。
- 使用场景： 背景，幻灯片，相册等，将要展示的前一张和后一张优先下载。
- 实现方法
-
css的方式`#preload{ background: url(01.png) no-repeat -9999px -9999px}` -
js实现方式` let img = document.createElement('img); img.src='01.png 或者 let img = new Imgae() img.src = '01.png `
图片懒加载 指当要使用到图片时，再加载图片，而不是一下子加载完所有的图片，可以来提高其他页面图片加速度。 场景 瀑布流滚动加载 举个例子 思路：一般都是子啊页面上添加一个滚动条事件，判断图片位置与浏览器顶部的距离是否小于（可视高度+滚动距离），如果小于则优先加载
- 获取对象距离页面顶端的距离
- 判断是否在可视区域内
- 绑定滚动事件，进行判断哪些元素在可视区域内，然后进行图片加载
- 在页面onLoad的时候，触发一次onScroll
function getH(obj) { let h = 0; while(obj){ h+=obj.offsetTop // 距离上一个标签的距离 obj += obj.offsetParent; } return h // 文档坐标 }
function isVisible(obj) { let t = document.doucumentElement.clientHeight +(document.documentElement.scrollTop || document.body.scrollTop); let h = getH(obj) return (h < t) }
window.onscroll = function(){}
window.onload = function(){ windoe.onscroll() }
