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

Question

这是一个简化的测试范围。我有一些WP网站，上面使用了Foogallery Pro。客户端为全屏演示添加了大量巨大的jpeg。像900张图片一样，单个页面的网络负载净值为1GiB。也无法摆脱它。

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

现在，对于我的测试，我想我会通过在我测试的子页面上出现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订阅，您可以通过作者的网站获得作者的直接支持，这应该比在这里询问更快。

感谢

EDIT：以下代码段将在不依赖promise或窗口事件的情况下产生相同的结果。这可以直接插入FooGallery>设置>自定义JS&CSS>自定义Javascript选项。

(function(_){
let avifSupported = false;
const avif = new Image();
avif.onload = function() { avifSupported = true; };
avif.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
const jpg2avif = (url) => url.replace(".jpg", ".avif");
// handle items being supplied via HTML by overriding the item parser method
_.Item.override( 'doParseItem', function( $elem ) {
// first call the original method to parse the supplied $elem
if ( this._super( $elem ) ) {
if ( avifSupported ) {
// 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
_.Item.override( 'doCreateItem', function() {
if ( avifSupported ) {
// 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);