如何实现网站图片的懒加载(按需懒加载)

对于一些有大量图片的网站,如果一个页面有50多张图片,会导致网站页面加载太慢,移动终端会消耗太多的流量。为了解决这个问题,LazyLoad可以用于按需加载,也称为惰性加载。

按需装载

什么是LazyLoad按需加载
LazyLoad按需加载采用图片按需加载技术,页面打开时只加载第一张图片。当访问者向下滚动时,他们将逐渐加载要显示的图片,这是非常高效和舒适的。

LazyLoad按需加载实现方法
当我们做自己的网站时,我们也可以实现LazyLoad按需加载,以增强网站的用户体验。让我们学会成为一个网站论坛,介绍LazyLoad的按需加载实现方法。(下面将使用html代码。如果您不熟悉代码,可以学习超文本标记语言视频教程。)

引入LazyLoad按需加载两个必要的文件:jquery.js和jquery.lazyload.js引入方法非常简单,只需将下面的代码放在标签上即可。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script>

网站上的所有图片都以以下格式书写:

<img class="lazy" src="" data-original="图片地址" width="100" height="100" alt="">

在网站的标签上,放入以下JS代码来实现LazyLoad点播(惰性加载);

<script type="text/javascript">
$(function() {
    $("img.lazy").lazyload({
        threshold : 200, // 设置阀值
        effect : "fadeIn" // 设置图片渐入特效
    });
});
</script>

这样,当我们构建自己的网站时,我们可以很容易地按需实现LazyLoad(惰性加载) 在你的网站上试试吧!

 

本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。

如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

转载请注明来源:如何实现网站图片的懒加载(按需懒加载)

本文链接:https://www.axdzc.com/blog/ljz

评论0

请先

1.即日起暂时取消网站QQ登录,之前用QQ登录的会员请联系客服绑定邮箱或改为密码登录。 2.交流社区已上线,会员如需交流请移动至交流社区发帖。
没有账号? 忘记密码?