预加载
预加载:就是资源提前加载,同一个网页加载出来的过程中 如果出现了多次加载同一个资源的时候 浏览器只会加载第一次的资源大家一起使用
一般整个网页的资源需要提前加载的 可以做预加载:比如精灵图,比如一些公共框架
懒加载
懒加载: 就是使用的时候再加载 不用不加载
减少浏览器的压力,提升用户体验,提高浏览器加载页面的效率
<img id="img1" src="" data-hyqj1="https://img2.baidu.com/it/u=2102736929,2417598652&fm=26&fmt=auto&gp=0.jpg">
<script type="text/javascript">
document.onscroll=function () {
console.log(66,window.pageYOffset)
if(window.pageYOffset>=1200){ //在页面滑轮下滑至接近img1图片时执行
var img1=document.querySelector("#img1")
// console.dir(img1.dataset.hyqj1)
img1.src=img1.dataset.hyqj1
}
}
</script>