图片预加载和懒加载

Posted 2020-11-01 刘兵

 

图片的可以为页面带来更好的展示效果，同时也能向用户传达更丰富的信息。在页面上展示图片时有两类典型问题：

1. 图片最初是隐藏的，但在需要显示时应能立即显示出来（如轮播图、相册展示、幻灯片）
2. 网页很长，而且网页上有大量的图片（如电商网站中的商品列表），但这些图片未必用户都会看到，如果用户根本就不滚动页面来查看这些图片，那这些图片的加载就会成为一种浪费。

解决这两类问题就需要使用图片预加载和懒加载技术。

图片预加载是在图片显示之前就让浏览器加载这个图片，这样当浏览器真正需要显示这个图片时就能瞬间将它显示出来，不需要再去下载和解码。图片预加载通常使用Image对象将图片载入内存。Image对象实际上就是一个<img>标签，只不过没有append到页面上而已。

图片懒加载则是让网页下部分的图片都先显示同一个loading图片，当页面向下滚动，这些图片露出来时，才将img标签的src改为正确的图片地址，这时浏览器才去下载图片并解码显示到页面上。图片懒加载的关键是监视页面的滚动及窗口大小变量并计算图片是否处于窗口工作区内（即用户能看到）。有很多图片懒加载插件或独立脚本，如：

jQuery.lazyload.js

echo.js