懒加载
懒加载的原理就是暂时不设置图片的src属性,而是将图片的url隐藏起来,比如写在data-src里面,等某些事件触发的时候再将图片真实的url放进src属性里面,从而实现图片的懒加载。
使用场景: 我们在进行一些页面上有大量的图片资源,图片资源非常庞大,小的几kb大的几mb都有,在这种情况下我们如果说进行一次性加载所有的资源不仅用户会等待很久而且还会造成页面卡顿等情况
预加载
是指在一些需要展示大量图片的网站,实现图片的提前加载。从而提升让你给与用户体验。常用的方式有两种:一是隐藏在css的background的url属性里面,二是通过javascript的image对象设置实例对象的src属性实现图片的预加载
使用场景: 需要追求运行效率的项目中,并且内存消耗非常低的业务逻辑。用户可以体验非常极致的加载和刷新效果,使用预加载可以做到非常好的效果
区别
懒加载和预加载是完全不同的,一个是提前加载资源,一个是延迟加载或者不加载,懒加载会缓解一些服务器端和客户端内存的压力,预加载则会增加服务器端可客户端的压力,但是两种加载模式有各自的适用场景有自己的优势