给文章编辑页面实现图片延迟加载功能

泽泽社长 2024年06月05日编辑

文档说明

作者的博文大部分是一张图一段话，日常编辑文章时也没有留意到以下情况，直到：偶然编辑多图文章时，发现浏览器的加载图标一直在转圈圈，很好奇地查看控制台，原来这是在同时加载页面中的所有图片，而自己并没有预览文章内容，嗯，于是乎有了这篇文档。

使用方法

A 涉及文件

admin/editor-js.php

B 改造文件
作用：给编辑器内容中的图片添加延迟加载功能。

打开文件 admin/editor-js.php 搜索找到以下代码：
```
 var images = $('img', preview), count = images.length;
```

在以上代码的下一行添加以下代码：

var observer = new IntersectionObserver(function(entries, observer) {
 entries.forEach(function(entry) {
     if (entry.isIntersecting) {
         var img = entry.target;
         var srcValue = img.getAttribute('data-original'); // 获取原始图链接
         
         // 加载完成后获取图片原始尺寸并更新占位符尺寸，避免图片变形
         img.onload = function() {
             var containerWidth = img.parentElement.clientWidth; // 获取容器宽度
             var containerHeight = img.parentElement.clientHeight; // 获取容器高度
             var imgWidth = img.naturalWidth; // 获取图片原始宽度
             var imgHeight = img.naturalHeight; // 获取图片原始高度                
             var scaleFactor = Math.min(containerWidth / imgWidth, containerHeight / imgHeight); // 计算图片缩放比例
             
             // 根据比例缩放图片，避免图片变形
             img.style.width = (imgWidth * scaleFactor) + 'px'; 
             img.style.height = (imgHeight * scaleFactor) + 'px'; 
             
             observer.unobserve(img); // 停止观察已经加载的图片
         };

         img.setAttribute('src', srcValue); // 加载图片
     }
 });
}, { rootMargin: "200px" }); // 延迟加载时机

images.each(function(index, element) {
 var imgElement = element;
 var srcValue = imgElement.getAttribute('src'); // 获取未改造 img 结构前的 src 原始图链接    
 imgElement.setAttribute('data-original', srcValue); // 将 src 值添加到 data-original 中，作为延迟加载前，待替换的原始图链接
 imgElement.setAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); // 将未改造 img 结构前的 src 替换为单像素占位符

 // 设置占位符的初始尺寸，避免单像素占位符同时置于视口中，导致所有图片同时加载
 imgElement.style.width = '800px';
 imgElement.style.height = '800px';

 observer.observe(imgElement); // 观察图片
});

至此，已完成给编辑器内容中的图片添加延迟加载功能，只有在点击「预览」后，处于视口中的图片才会加载显示，避免了打开编辑页时，就同时加载所有图片的情况。