当前位置: 首页 > news >正文

【性能优化】图片性能优化方案

前言

通常可以通过 压缩图片、cdn、懒加载 等方式对图片进行性能优化

懒加载

通过 IntersectionObserver 监听

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img data-src="image.jpg" class="lazyload"><script>document.addEventListener('DOMContentLoaded', function () {const lazyImages = document.querySelectorAll('img.lazyload');if ("IntersectionObserver" in window) {const observer = new IntersectionObserver(function (entries, observer) {entries.forEach(entry => {if (entry.isIntersecting) {const image = entry.target;image.src = image.dataset.src;image.classList.remove('lazyload');observer.unobserve(image);}})})lazyImages.forEach(image => {observer.observe(image)})} else {lazyImages.forEach(image => {image.src = image.dataset.src;})}})</script>
</body></html>

监听滚动

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img data-src="default.png" class="lazyload"><script>document.addEventListener('DOMContentLoaded', function () {const lazyImages = document.querySelectorAll('img.lazyload');const lazyLoad = function () {lazyImages.forEach(function (img) {if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom > 0 && getComputedStyle(img).display !== 'none' && img.getAttribute('data-src') !== null) {img.src = img.dataset.srcimg.classList.remove('lazyload')}})if (lazyImages.length === 0) {document.removeEventListener('scroll', lazyLoad)window.removeEventListener('resize', lazyLoad)window.removeEventListener('orientationchange', lazyLoad)}}document.addEventListener('scroll', lazyLoad)window.addEventListener('resize', lazyLoad)window.addEventListener('orientationchange', lazyLoad)})</script>
</body></html>

http://www.mrgr.cn/news/74734.html

相关文章:

  • UniApp 应用、页面与组件的生命周期详解
  • Nginx 的 proxy_pass 使用简介
  • 2024最新 Dev C++下载和安装详细步骤 (带图展示)
  • css:基础
  • 立体工业相机提升工业自动化中的立体深度感知
  • 前端学习八股资料CSS(二)
  • Python 绘图工具详解:使用 Matplotlib、Seaborn 和 Pyecharts 绘制散点图
  • 基于Springboot+微信小程序的付费选座自习室小程序 (含源码数据库)
  • JavaScript 对象
  • fpga开发-存储器及其应用
  • 图像识别
  • AI开发-三方库-PyTorch-Matplotlib
  • TLP2361光耦器:为高速、高可靠性数字接口提供解决方案
  • STM32F407简单驱动步进电机(标准库)
  • 3.5MachineLearing1Chapter
  • 威联通Docker Compose搭建NAS媒体库资源工具NAS Tools
  • 基于51单片机的高压锅控制系统proteus仿真
  • 污水处理领域的可视化大屏,3D流程图绝对有很大用武之地。
  • PHP“well”运动健身APP 87702-计算机毕业设计项目选题推荐(附源码)
  • DAY112代码审计PHP开发框架POP链利用Yii反序列化POP利用链
  • NocoBase 本周更新汇总:提升工作流易用性
  • C/C++精品项目之图床共享云存储(3):网络缓冲区类和main
  • 「媒体邀约」科技类企业如何利用媒体专访提升品牌知名度
  • Vuex vs Pinia:新一代Vue状态管理方案对比
  • IDEA2024:右下角显示内存
  • 苹果APNs消息推送