使Foogallery WP插件在测试上下文中可用的地方使用AVIF图像

Question

这是来自一个简化的测试范围。我有一些与Foogallery Pro一起使用的WP网站。客户端为全屏演示增加了大量巨大的jpegs。就像900张图片一样，一个页面的网络负载净值为1 GiB。也不能说服你放弃它。

对于现代浏览器，我想我会尝试用我为测试生成的AVIF (88 MiB总计而不是1 1GiB)图像来欺骗它。只计算了大约24小时在一个16核心的Xeon WS，但唉。

现在，对于我的测试，我想我会在我测试的子页面上触发CSS类.useAVIF的替换。

然后，我想知道浏览器是否能够首先显示AVIF图像，并通过JS找到：

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

到目前为止，到目前为止，当我们有一个DOM时，我想我应该用AVIF而不是JPEG替换Foogallery使用的所有DOM元素。它们都驻留在同一个文件夹中，它们也都存在。

jQuery(document).ready(function( $ ){
    canUseAVIF=($(".useAVIF").size()>0)&&canUseAVIF;
    if (canUseAVIF)
    {
      $(".foogallery-container .fg-item-inner img").each(function(){
        var avif=$(this).attr('data-src-fg');
        avif=avif.replace(".jpg", ".avif");
        $(this).attr('data-src-fg',avif);
        avif=$(this).attr('src');
        avif=avif.replace(".jpg", ".avif");
        $(this).attr('src',avif);
      });
      $(".foogallery-container .fg-item-inner a").each(function(){
        var avif=$(this).attr('href');
        avif=avif.replace(".jpg", ".avif");
        $(this).attr('href',avif);
      });
    }
...

可能会更优雅，但这是一个快速的测试，记忆。

现在，这确实像我想的那样调整了DOM，但是它不起作用。因为Foogalery特定的脚本必须已经解析了内容，或者一定有其他机制在起作用。当图像被加载时，src再次变成JPEG。

有没有人有洞察力或灵感，这些JPEG引用可能存在于JS数据结构中，这样我就可以遍历它们并替换它们了吗？

Answer 1

下面这些应该会让你朝着正确的方向前进。我采取的方法是更好地连接到FooGallery的项目、创建和解析方法，并根据需要修改URL。我已经对剧本进行了评论，但如果你有任何问题，请告诉我：

new Promise( ( resolve, reject ) => {
    const img = new Image();
    img.onload = function() { resolve(); };
    img.onerror = function() { reject(); };
    img.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
} ).then( () => {
    document.addEventListener( 'foogallery-ready', ( event ) => {
        const jpg2avif = (url) => url.replace(".jpg", ".avif");
        const FG = event.detail;

        // handle items being supplied via HTML by overriding the item parser method
        FG.Item.override( 'doParseItem', function( $elem ) {
            // first call the original method to parse the supplied $elem
            if ( this._super( $elem ) ) {
                // and if successful update the parsed properties
                this.href = jpg2avif( this.href );
                this.src = jpg2avif( this.src );
                this.srcset = jpg2avif( this.srcset );

                // and then update the actual DOM elements
                this.$anchor.attr('href', this.href);
                this.$image.attr({
                    'data-src-fg': this.src,
                    'data-srcset-fg': this.srcset
                });
                // return true as parsing is complete
                return true;
            }
            // something failed in the original parse so return false
            return false;
        } );

        // handle items being supplied via JSON by overriding the item create method
        FG.Item.override( 'doCreateItem', function() {
            // first update the required values
            this.href = jpg2avif( this.href );
            this.src = jpg2avif( this.src );
            this.srcset = jpg2avif( this.srcset );
            // then call the original method to create the DOM elements
            return this._super();
        } );
    });
} );

对于将来使用FooGallery Pro订阅的参考，您可以通过他们的网站获得作者的直接支持，这应该比在这里询问更快。

谢谢