JS图片懒加载——前端性能优化

js懒加载:简单粗暴实现方法


意义

懒加载(LazyLoad)是前端优化的一种有效方式,能极大的提升用户体验,图片加载是其重点,如果加载图片过多将大大增http请求次数或大小,然而更多时候用户并不会浏览到全部加载进来的图片,这种代价是非常不值得的,所以当用户浏览到当前视口时再去加载相应的图片无疑是两全其美的选择

原理:只有img标签中的src写入了图片的地址,加载页面时才会请求图片,所以使用懒加载时在src中并不写入任何地址,把图片的真实地址放到data- (标签内部属性可存数据)属性中,在js中绑定鼠标滚动事件,其回调中遍历所有图片并作出判断,将出现在视口中的图片的 'data-' 属性保存的地址放到 'src' 中即可

实现

实现方式:原生js

HTML:

引入一堆图片src为空,地址写在data-original中,onerror表示当未加载图片时显示的临时加载页图片

JavaScript :

当图片进入到视口160px时将会加载进来

效果:


当图片滚动到视口范围内才会加载该图片
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,803评论 1 32
  • 懒加载介绍: 通俗介绍:懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求。通俗的说就是你不要...
    BULL_DEBUG阅读 4,768评论 0 0
  • 在这个前端用户体验越来越重要的时代,你的页面稍微有点卡顿,都难以挽留用户。而作为一名有追求的前端,势必要力所能及地...
    程序员小布的养生之道阅读 4,921评论 0 50
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,046评论 1 45
  • tips:接下去会在github写博客,简书不再更新和修改文章,欢迎大家逛逛我的新博客点击查看 ,我会尽量用更容易...
    aermin阅读 6,382评论 0 34