在网站开发中，如何实现图片的预加载？

1. 使用 XMLRequest 请求图片资源，提供了 onprogress 函数能够很精细的获取到资源的信息。但可能会存在跨域问题。

2. 创建一个 image 的实例，给 src 的属性设置 url 。

3. 添加一个 image 节点,给 src 属性设置 url ，设置display:none。

直接加载图片，但不在页面渲染。

<div class="demo">
  <img class="hidden" src="http://lbimg.tvmao.com/stillcut/KpwpLR8sL7CkVnSoKDwnL7=.jpg" alt="image preload" />
</div>

创建 image 的实例

const image = new Image();
image.src = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3932093531,259615635&fm=26&gp=0.jpg';

使用XMLHttpRequest请求图片资源

const xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open('GET', 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3932093531,259615635&fm=26&gp=0.jpg');
xmlHttpRequest.onload = () => {};
xmlHttpRequest.send();

预加载和懒加载的区别？本质是什么？对服务器前端各有什么影响？

预加载是提前加载，在用户需要查看的时候直接从本地缓存读取。 懒加载是延迟加载或者不加载。目的就是为了减少请求数或者延迟请求数，避免带宽的不必要浪费。 两者的行为是相反的，一个是牺牲服务器性能提前加载换取更好的用户体验，一个是延迟加载或者不加载。 预加载会增加服务器的压力，懒加载会缓解服务器的压力。

以上就是【js实现图片的预加载】的全部内容了,欢迎留言评论进行交流!