性能优化之图片懒加载

本文在github做了收录 github.com/Michael-lzg…

demo源码地址 github.com/Michael-lzg…

为什么要进行图片懒加载

我们先来看一下页面启动时加载的图片信息。

图片懒加载的原理

我们先来看下页面结构

  <head><meta charset="UTF-8" /><title>Lazyload</title><style>img {display: block;margin-bottom: 50px;height: 200px;width: 400px;}</style></head><body><img src="./img/default.png" data-src="./img/1.jpg" /><img src="./img/default.png" data-src="./img/2.jpg" /><img src="./img/default.png" data-src="./img/3.jpg" /><img src="./img/default.png" data-src="./img/4.jpg" /><img src="./img/default.png" data-src="./img/5.jpg" /><img src="./img/default.png" data-src="./img/6.jpg" /><img src="./img/default.png" data-src="./img/7.jpg" /><img src="./img/default.png" data-src="./img/8.jpg" /><img src="./img/default.png" data-src="./img/9.jpg" /><img src="./img/default.png" data-src="./img/10.jpg" /></body>
</html>

function lazyload() {let viewHeight = document.body.clientHeight //获取可视区高度let imgs = document.querySelectorAll('img[data-src]')imgs.forEach((item, index) => {if (item.dataset.src === '') return// 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置let rect = item.getBoundingClientRect()if (rect.bottom >= 0 && rect.top < viewHeight) {item.src = item.dataset.srcitem.removeAttribute('data-src')}})
}

getBoundingClientRect函数解释：

rectObject = object.getBoundingClientRect();

window.addEventListener('scroll', lazyload)

function throttle(fn, delay) {let timerlet prevTimereturn function (...args) {const currTime = Date.now()const context = thisif (!prevTime) prevTime = currTimeclearTimeout(timer)if (currTime - prevTime > delay) {prevTime = currTimefn.apply(context, args)clearTimeout(timer)return}timer = setTimeout(function () {prevTime = Date.now()timer = nullfn.apply(context, args)}, delay)}
}

window.addEventListener('scroll', throttle(lazyload, 200))

IntersectionObserver 实现懒加载

地址：https://juejin.cn/post/6903774214780616718#heading-2

性能优化之图片懒加载相关推荐

vue 图片拖动加载类似于地图_前端性能优化之图片懒加载（附vue自定义指令）...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
性能优化---vue路由懒加载和异步组件
1.路由懒加载整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块. 实现方式有: 1.require:加载组件. component: resolve => req ...
前端性能优化的重要方案：图片懒加载
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端性能优化的重要方案:图片懒加载,主要包括其原理,我们常用的一些插件,及编写源码实现图片懒加载功能等,图片懒加载是项目比较常见的 ...
前端图片渲染性能优化与实践 — 图片懒加载
前言对于图片量比较大的点上首页APP等,在打开商品展示页面的时候需要再加大量图片,在这种场景下如果直接全量加载,必然会造成页面性能消耗过大,白屏或者卡顿,用户体验非常糟糕,用户真的需要我们显示所有图 ...
java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...
懒加载实践--js图片懒加载及优化
一.前言为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...
微信小程序优化：如何实现图片懒加载？
前言当我们在使用微信小程序浏览图片时,不可避免地会遇到加载缓慢的情况.这不仅会影响用户体验,还会耗费用户的流量.那么,有没有一种方法可以让图片在用户需要时再进行加载,从而提升用户体验和减少流量消耗呢 ...
JavaScript两个实用的图片懒加载优化方法
文章目录一.方法一二.方法二 InterSectionObserver 一.方法一重点: 1.getBoundingClientRect().top > window.innerHeigh ...

性能优化之图片懒加载

为什么要进行图片懒加载

图片懒加载的原理

IntersectionObserver 实现懒加载

性能优化之图片懒加载相关推荐

最新文章

热门文章