图片利用 new Image()预加载原理 和懒加载的实现原理

二：预加载和懒加载的区别
 
预加载与懒加载，我们经常经常用到，这些技术不仅仅限于图片加载，我们今天讨论的是图片加载：
 
图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。
图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
 
二、图片预加载与懒加载的区别：
两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预载则会增加服务器前端压力。
 
 
    预加载
if (document.images) {
console.log(document.images)
img1 = new Image();
img2 = new Image();
img3 = new Image();
console.log(img1, img2, img3)
img1.src = "./images/logo.png";
img2.src = "./images/coding-net-ad.jpg";
img3.src = "./images/coding-net-ad.jpg";
document.getElementById('one').src = img1.src
 
直接new image（）图片对象，
img1 = new Image();
img2 = new Image();
img3 = new Image();
 
然后把地址放在图片对象上 （图片对象 img1 img2 img3）
img1.src = "./images/logo.png";
img2.src = "./images/coding-net-ad.jpg";
img3.src = "./images/coding-net-ad.jpg";
最后 把页面图片上的地址修改为图片对象上的地址就可以了，实现预加载不用每次都加载请求了。
封装使用  延迟预加载时间，知道页面加载结束，上诉代码封装后，判断是否window.onload是否结束，结束接调用函数即可。
 
懒加载js原生实现
获取图片，滚动事件中计算图片的位置，如果在可视区域，在实现存放在img标签上的图片路径赋值到img标签的src上即可。
 
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可是区域内的图片
window.onscroll = lazyload;
function lazyload() { //监听页面滚动事件
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}

懒加载   (利用插件实现)
vue-lazyload懒加载插件

1.安装插件

npm install vue-lazyload   --save

2.引用文件，一般在main.js全局引用，且配置好图片



3.在入口文件添加后，在组件任何地方都可以直接使用把 img 里的:src -> v-lazy