测试环境下让Foogallery WP插件使用AVIF图片的问题排查

问题背景 #

使用Foogallery Pro搭建的WordPress站点，客户上传了900张总计1GiB的大尺寸JPEG用于全屏展示，无法更换。生成了总计88MiB的AVIF图片用于优化加载速度，计划通过.useAVIF类触发替换。已实现AVIF浏览器支持检测，DOM修改操作执行成功，但Foogallery脚本会将图片src自动改回JPEG，需要找到Foogallery存储图片数据的JS结构进行根源替换。

核心原因 #

Foogallery会将画廊的图片元数据存储在全局JS对象中，渲染时会从这个数据源读取信息更新DOM，仅修改DOM元素的属性会被Foogallery的内置脚本覆盖。

解决步骤 #

1. 定位Foogallery的数据源 #

打开浏览器开发者工具控制台，输入以下命令查看全局数据结构：

console.log(foogallery_galleries);

该数组包含所有画廊实例，每个实例的items属性存储了每张图片的原始数据（包括src、href、thumbnail等字段），这就是Foogallery渲染时依赖的核心数据源。

2. 修改数据源+同步DOM的代码 #

结合AVIF检测逻辑，在Foogallery初始化完成后，同时修改全局数据源和DOM元素：

var canUseAVIF = false;
var avif = new Image();
avif.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";

// 检测AVIF支持状态
avif.onload = function () { canUseAVIF = true; };
avif.onerror = function () { canUseAVIF = false; };

jQuery(document).ready(function ($) {
    // 仅在目标页面执行替换逻辑
    if (!$(".useAVIF").length || !canUseAVIF) return;

    // 等待Foogallery初始化完成再操作
    $(document).on('foogallery:initialized', function() {
        // 修改全局数据源
        if (typeof foogallery_galleries !== 'undefined') {
            foogallery_galleries.forEach(function(gallery) {
                gallery.items.forEach(function(item) {
                    if (item.src) item.src = item.src.replace(".jpg", ".avif");
                    if (item.href) item.href = item.href.replace(".jpg", ".avif");
                    if (item.thumbnail) item.thumbnail = item.thumbnail.replace(".jpg", ".avif");
                });
            });
        }

        // 同步修改DOM元素
        $(".foogallery-container .fg-item-inner img").each(function() {
            var $img = $(this);
            $img.attr('data-src-fg', $img.attr('data-src-fg').replace(".jpg", ".avif"));
            $img.attr('src', $img.attr('src').replace(".jpg", ".avif"));
        });

        $(".foogallery-container .fg-item-inner a").each(function() {
            var $a = $(this);
            $a.attr('href', $a.attr('href').replace(".jpg", ".avif"));
        });

        // 重新触发懒加载（如果画廊启用了懒加载功能）
        if (typeof $.fn.fgLazyLoad !== 'undefined') {
            $(".foogallery-container").fgLazyLoad('refresh');
        }
    });
});

3. 关键说明 #

• foogallery_galleries：Foogallery存储所有画廊实例的全局数组，必须优先修改这里的items数据，避免Foogallery渲染时覆盖DOM修改。
• foogallery:initialized事件：确保Foogallery已完成初始化，数据源已生成后再执行替换操作，避免修改无效。
• 懒加载处理：如果画廊启用了懒加载，修改后需要调用fgLazyLoad('refresh')重新加载AVIF图片，确保懒加载逻辑同步更新。

内容的提问来源于stack exchange，提问作者C.O.