Question

因此，我正在做一个扩展程序（供个人使用），使我可以使用箭头键滚动Reddit紧凑模式，并且所有图像都可以在扩展程序创建的元素中进行预览。我遇到的问题是在扩展名创建的图像元素中播放.gif和.gifv。 GIF是否应该能够直接加载到图像元素中？不确定gifv。我可以让扩展名检查源代码的“ .gif”和“ .gifv”结尾，然后创建视频元素而不是图像元素，但这是必需的吗？

也许我需要添加一些内容？这是我用来添加图像元素的完整代码：

function createElement(source) {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var bottomPlacement = h - 58;
bottomPlacement = bottomPlacement * -1;
w = w / 2;
h = h - 102;

var new_el
if (source.includes(".gif")) {
    new_el = document.createElement('video');
    new_el.preload = "auto";
    new_el.autoplay = true;
    new_el.style.width = w + 'px';
} else {
    new_el = document.createElement('img');
}
new_el.setAttribute('src', source);
new_el.setAttribute('id', 'extensionOverlay');
new_el.style.height = h + 'px';
new_el.style.position = 'absolute';
new_el.style.float = 'right';
new_el.style.right = '24px';
new_el.style.zindex = 99;
new_el.style.bottom = bottomPlacement + 'px';
new_el.style.border = "medium solid #0099cc"
var plass = document.getElementsByTagName('header')[0];
plass.insertBefore(new_el, plass.children[1]);
document.getElementById('extensionOverlay').addEventListener('load', function() {
    var imageH = document.getElementById('extensionOverlay').naturalHeight;
    var imageW = document.getElementById('extensionOverlay').naturalWidth;
    var percentAltered = h / imageH;
    var widthOfImage = imageW * percentAltered;
    if (imageW < 200 && imageH < 200) {
        new_el.style.width = ""; new_el.style.height = "300px";
    } else if (widthOfImage > w) {
        new_el.style.height = "";
        new_el.style.width = w + 'px';
    } 
});
}

找到了解决方案。只需将.gifv更改为.gif并添加为图像...：

var new_el
if (source.includes(".gifv")) {
    source = source.replace(".gifv", ".gif");
}
new_el = document.createElement('img');
new_el.setAttribute('src', source);
new_el.setAttribute('id', 'extensionOverlay');
new_el.style.height = h + 'px';
new_el.style.position = 'absolute';
new_el.style.float = 'right';

（JS）在图像元素中加载.gif和.gifv吗？

0 个答案: