JS使用lazyload进行图片懒加载

原理:

图片的加载是由src引起的,当对src赋值时浏览器会请求图片资源,基于这个,可以利用html5的属性data-xxx来保存图片的路径,当我们需要加载图片的时候才将data-xxx的值赋予src。就能实现图片的按需加载了,也就是懒加载了

方法:

1.使用lazyload插件,引用jquery.js和jquery.lazyload.js
2.将img标签中的src属性赋值为加载图片,即一张临时的loading.gif图,将真正的图片路径放在data-original属性中
3.当JS监听到该图片元素进入可视窗口时,将data-original属性中的地址存赋予到src属性中,达到懒加载的效果

引用
  
//html

  • %title插图%num
  • %title插图%num
  • %title插图%num
  • %title插图%num
  • %title插图%num
//js $('ul img').lazyload()

这样就完成了最简易的图片懒加载了

可自行拓展延伸
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:青梅博客 » JS使用lazyload进行图片懒加载

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活