chore(ci): blog sync

Author: coderPerseus

data/blog/post-35.mdx

@@ -0,0 +1,142 @@
+---
+title: tytemd 中如何实现图片懒加载
+date: 2024-12-21T11:47:04Z
+slug: post-35
+author: chaseFunny：https://github.com/chaseFunny
+tags: ["AI","React","前端开发"]
+---
+
+大家好，我是 luckySnail ,周五正当我和 AI 如胶似漆的时候，后端同事突然和我说有一个地方需要我优化一下，我就问他，什么快和我说，他打开一个项目页面，然后打开控制台和我说，你看，这个网页刚进入就把所有图片都请求了了一次，并且因为请求太多图片导致触发了我们设置的最大限制，导致后面的图片直接请求失败，从而导致左侧图片都是加载失败的样子
+
+![image-20241221181821017](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20241221181821017.png)
+
+好家伙，这都是老板白花花的银子呀！赶紧修复上线，可是怎么修复呢？
+
+## 问题分析
+
+解决问题前，我们可以先分析一下问题，就像我们看病一样，我们总得先挂号，让医生看看身体是怎么了。说回正题，问题分析：
+
+- 页面首次加载时就请求所有图片资源
+- 大量图片并发请求触发了服务器限制
+- 导致部分图片加载失败
+- 造成不必要的带宽消耗和性能浪费
+
+知道了问题，我们看下解决方案：使用图片懒加载（Lazy Loading）技术。图片懒加载是一种网页性能优化技术，它可以延迟加载页面中不可见的图片，直到用户滚动到可见区域时才进行加载
+
+其实大厂们也都是这么做的，不信我们看看掘金平台
+
+![image-20241221183028256](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20241221183028256.png)
+
+![image-20241221183133520](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20241221183133520.png)
+
+我们可以看到当我们页面滚动到下面才加载对应的图片
+
+## 解决问题
+
+下面我们来解决一下我们教程中图片加载问题，由于我们项目使用 bytemd 作为内容渲染器，所以图片的渲染其实在 bytemd 内部完成的，那我们想要自定义渲染图片的逻辑，也就需要借助 bytemd 的自定义插件的能力了，通过查阅源码得知：插件也就是一个函数，用于扩展 Bytemd 编辑器和查看器的功能，返回指定的对象类型，返回对象类型已经定义好了，是 BytemdPlugin 。它包含五个属性：
+
+- remark：自定义 Markdown 解析
+- rehype：HTML 解析
+- actions：注册操作，也就是定义我们编辑框上面哪些小图标的
+- editorEffect ：编辑器副作用
+- viewerEffect：查看器副作用
+
+我们需要的是 viewerEffect ，然后我们只需要先获取到所有图片，然后为图片添加上懒加载的逻辑，具体的思路：
+
+1. 在 viewerEffect 中，拿到 markdownBody ，也就是 md 的内容，是一个 DOM 元素
+2. 通过 querySelectorAll 获取所有 img 标签，然后，我们有两个选择，
+3. 第一，使用游览器自带的图片懒加载
+4. 第二，使用 IntersectionObserver 来实现懒加载，这种方式可以设置一个占位图，这样体验更加好
+
+最后，我们看一下具体代码：
+
+```ts
+import type { BytemdPlugin } from 'bytemd'
+
+export interface ImageLazyLoadOptions {
+  // 是否使用原生懒加载
+  useNativeLazy?: boolean;
+  // 自定义加载占位图
+  placeholderSrc?: string;
+  // 自定义类名
+  className?: string;
+}
+
+export default function imageLazyLoad(options: ImageLazyLoadOptions = {}): BytemdPlugin {
+  const {
+    useNativeLazy = true,
+    placeholderSrc = '',
+    className = ''
+  } = options;
+
+  return {
+    viewerEffect({ markdownBody }) {
+      // 获取所有图片元素
+      const images = markdownBody.querySelectorAll('img');
+
+      images.forEach((img) => {
+        // 保存原始src
+        const originalSrc = img.getAttribute('src');
+
+        if (useNativeLazy) {
+          // 使用原生懒加载
+          img.setAttribute('loading', 'lazy');
+        } else {
+          // 使用 Intersection Observer 实现懒加载
+          const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                const obImg = entry.target as HTMLImageElement;
+                if (originalSrc) {
+                  obImg.src = originalSrc;
+                }
+                observer.unobserve(obImg);
+              }
+            });
+          });
+
+          // 设置占位图
+          if (placeholderSrc) {
+            img.src = placeholderSrc;
+          }
+
+          // 将原始图片地址存储在data属性中
+          img.dataset.src = originalSrc || '';
+          img.src = placeholderSrc;
+
+          // 添加自定义类名
+          if (className) {
+            img.classList.add(className);
+          }
+
+          // 开始观察
+          observer.observe(img);
+        }
+      });
+    }
+  }
+}
+```
+
+我们看看效果吧！
+
+![image-20241221184754629](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20241221184754629.png)
+
+![image-20241221184841801](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20241221184841801.png)
+
+![image-20241221185043728](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20241221185043728.png)
+
+完美修复bug，也节省了开销
+
+## 开源 tytemd 的图片懒加载插件
+
+相信肯定也有其他小伙伴有同样的问题，那就开源吧，毕竟谁会拒绝直接拿来使用呢？
+
+地址：https://www.npmjs.com/package/bytemd-plugin-image-lazy
+
+如果你觉得写得不错，对你有帮助，点个赞再走吧！
+
+哦对了，有人好奇如何从 0 发布一个 npm 包吗？
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/35" target="_blank">github issues</a>