为了提高前端的性能和用户的体验感，我们可以使用jquery.scrollLoading.js插件让图片在未展示时，先显示一个较小的加载图，当页面滚动到图片时替换为真实显示的图片地址。
使用方法
在HTML中引入js
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mini/jquery.scrollLoading-min.js"></script>插件初始化
为所有class为scrollLoading的元素绑定了滚动加载的方法。
$(".scrollLoading").scrollLoading();HTML结构
在HTML5中，以data-开头的自定义属性都是合法的，且地址可以是图片，页面等。
新增一个data-url属性,设置为真实图片的地址，src使用一个较小的图片显示，当滚动界面可以显示真实的图片时，再替换为data-url的地址。
<img class="scrollLoading" data-url="https://www.qinyi.info/wp-content/uploads/2021/10/jquery.jpg" alt="jQuery canvas验证码" src="https://cdn.jsdelivr.net/gh/rm-rf-run/jasmine/assets/images/loading.gif" style="background:url(https://cdn.jsdelivr.net/gh/rm-rf-run/jasmine/assets/images/loading.gif) no-repeat center;">如果动图太大也会消耗较大的资源，建议使用cdn加速。
