预加载 - WEB前端 - 伯乐在线

提起Pinterest，大家第一印象可能是图片社交网站，里面有很多用户上传的各式各样的图片。从前端设计出发的话，我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天，给大家简要分析上 Pinterest上另外一项非常值得借鉴图片加载细节。

图片的加载速度往往影响着网站整体的用户体验，尤其对于包含大量图片的网站。对图片进行预加载，不失为一个高效的解决方案。如何实现预加载？本文将例举利用CSS、JavaScript及Ajax实现图片预加载的三大方法。

懒加载和本文要提到的预加载实际是不同的概念。典型的懒加载，例如本博文章的图片，当用户滚动图片进入窗体的时候，才去加载；或者用户点击选项卡，原本隐藏的图片此时再去加载，这个也称之为懒加载。

在做h5移动页面，相信大家一定碰到过页面已经打开，但是里面的图片还未加载出来的情况，这种问题虽然不影响页面的功能，但是不利于用户体验。

当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的 gzip 压缩等，这使得页面加载更快，用户可以尽快使用我们的 Web 应用来达到他们的目标。资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

我们经常会看到，一些站点在首次进入的时候会先显示一个进度条，等资源加载完毕后再呈现页面。然后整个页面的操作就会非常流畅。尤其是在移动端或是页游中，这样做能避免页面出现白屏，提升用户体验。那这种技术是如何实现的呢？