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属性中,达到懒加载的效果

引用

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

可自行拓展延伸

未经允许不得转载:一点博客-青梅煮码-共享博客 » JS使用lazyload进行图片懒加载
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏