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

06月02日

适用程序：Typecho
程序版本：1.2.1
文档作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/3651.html
许可方式：CC BY-NC-SA

注意：此文档源于作者在博客改造中的一些经验总结，转载还请署名。

敬告：此文档操作涉及程序核心文件的修改，作者不对你在使用中产生的任何问题造成的不良后果，承担责任。
文档说明

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

使用方法

A 涉及文件

admin/editor-js.php

B 改造文件

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

1. 打开文件 admin/editor-js.php 搜索找到以下代码：


    var images = $('img', preview), count = images.length;


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


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); // 观察图片
});


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