qinyi素材网
当前位置: 首页 > WEB教程 > 使用jquery.scrollLoading.js延迟加载图片

使用jquery.scrollLoading.js延迟加载图片

  时间: 2021-11-01   阅读:319
简要教程

为了提高前端的性能和用户的体验感,我们可以使用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加速。

上一篇: 下一篇: