传统的两种方式 1.import() 符合ECMAScript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 Promise 对象。这意味着模块时异步加载的 function component() { return ...

001、什么是懒加载 懒加载也就是延迟加载 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来 ...

一、效果图如下 上面的效果图，效果需求如下 1、还没加载图片的时候，默认显示加载图片背景图 2、刚开始进入页面，自动加载第一屏幕的图片 3、下拉界面，当一张图片容器完全显露出屏幕，即刻加载图片，替换背景图 4、加载 ...

话说前头： 上次写了一篇webpack的学习心得，webpack能做到提升前端的性能，其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外，本次的图片懒加载（当然不仅限于图片，还可以有视频，flash等）也是一种优化前端性能的方式。使用懒加载可以想要 ...

话说前头： 上次写了一篇webpack的学习心得，webpack能做到提升前端的性能，其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外，本次的图片懒加载（当然不仅限于图片，还可以有视频，flash等）也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片 ...

　　懒加载 　　 也叫延迟加载，即在需要的时候进行加载，随用随载。 　　　为什么需要懒加载？ 　　　像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是 ...

http请求 如果你学过计算机网络你就会知道，我们请求一个带有n张图片的html文件实际上会发送n+1次请求，因为在浏览器解析html的时候遇到了src，就会请求src后面的内容。 设想一下如果我们的页面有1000000张图片，那么如果等待这些图片响应成功并加载完时延是非 ...

在项目开发中，我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片，但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化，只加载浏览器窗口内的图片，当用户滚动时，再加载更多的图片。这种加载图片的方式叫做图片懒加载，又叫做按需加载或图片的延时加载 ...