当前位置:首页 » 代码教程 » 网站图片懒加载如何实现(LazyLoad按需加载)

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

对于一些拥有大量图片的网站来说,如果一个页面有超过 50 张图片,就会造成网站页面加载太慢以及移动端耗费流量太大。为了解决这样的问题,可以使用LazyLoad按需加载,又称懒加载。

LazyLoad按需加载

什么是LazyLoad按需加载
LazyLoad按需加载采用图片按需加载技术,打开页面时只会加载首屏图片。访客往下滚动时才会陆续加载需要展现的图片,这样非常高效,体验舒适。

LazyLoad按需加载实现方法
我们在自己做网站时,也可以实现LazyLoad按需加载,增强网站的用户体验。下面学做网站论坛就来介绍一下LazyLoad按需加载实现方法。(以下会使用到HTML代码,如果对代码不熟悉,可以学习一下html视频教程)

引入LazyLoad按需加载必须的二个文件:jquery.js和jquery.lazyload.js。引入方法很简单,只需将下面的代码放到</head>标签上方即可;
<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="">

在网站的</body>标签上面,放上以下的JS代码,来实现LazyLoad按需加载(懒加载);
<script type="text/javascript">
$(function() {
    $("img.lazy").lazyload({
        threshold : 200, // 设置阀值
        effect : "fadeIn" // 设置图片渐入特效
    });
});
</script>

这样,我们自己在建网站时,也可以轻松实现LazyLoad按需加载(懒加载)了。快去自己的网站上试试吧!
End
温馨提示:如果您对本文有疑问,请在本页留言即可!!!
觉得很赞 (2)付款方式
X
付款方式:
  • 微信
  • 支付宝
  • QQ红包

使用微信扫一扫
blogger
    发布日期:2019-09-15   所属类别:代码教程   浏览:667次   评论:4次
    本文地址:https://www.shuyong.net/chengxu/1108.html [ 百度已收录 ]
    声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!

留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

填写好QQ号码,任点空白处自动获取

昵称

邮箱

网址

4楼、头条 [回复该留言]
2019-11-24 23:52
文章不错支持一下吧
3楼、短信验证码 [回复该留言]
2019-10-10 17:17
这个有用!加快网页加载速度!
2楼、米石文创 [回复该留言]
2019-10-08 21:01
现在网速都不错。感觉这种以后都不需要了
1楼、托管中心加盟 [回复该留言]
2019-09-16 17:18
增加用户体验度,能大大留住用户

个人资料

舍力

博主:舍力

Emlog交流群

    网站制作
    1、博客网站以Emlog为程序;
    2、企业网站建议以米拓MetInfo为程序,当然也可以用Emlog来做。

广告赞助

博客统计

  • 文章数量:1100篇
  • 文章评论:3373条
  • 总访问量:5130514次
  • 微语数量:63条
  • 在线人数:1人
  • 本站运行:6年3月17天
  • 估计博主很忙,已经很久没更新了!
Q2 虚位以待
Copyright © 2019 舍力博客 版权所有   粤ICP备11021420号
基于宝塔面板,数据存储于阿里云ECS
Powered by emlog / &Author 舍力博客.