我如何更改这个已弃用的代码 document.write 以提高页面速度

如何解决我如何更改这个已弃用的代码 document.write 以提高页面速度

我想改进我在 wordpress 侧边栏中的代码，我想要的是每次人们输入时随机加载一个图像。目前，我在下面显示的代码可以正常工作，但是当我将页面置于 google speed 时，它会显示：

避免使用：document.write()

function getimageFromLink(link) {
    return new Promise(function (resolve) {
        var image = new Image();
        image.onload = function () { resolve(image); };
        image.src = link;
    });
}

function resizeImagetoBlob(image,width,height,mime) {
    return new Promise(function (resolve) {
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').drawImage(image,height);
        return canvas.toBlob(resolve,mime);
    });
}

getimageFromLink(location.href).then(function (image) {
    // calculate these based on the original size
    var width = image.width / 4;
    var height = image.height / 4;
    return resizeImagetoBlob(image,'image/jpeg');
}).then(function (blob) {
    // Do something with the result Blob object
    document.querySelector('img').src = URL.createObjectURL(blob);
});

link = new Array();
link[0] = '<a href="" target="_blank" rel="noopener nofollow"><img src="" width="300" height="408"/></a>';
link[1] = '<a href="" target="_blank" rel="noopener nofollow"><img src="" width="300" height="408"/></a>';
link[2] = '<a href="" target="_blank" rel="noopener nofollow"><img src="" width="300" height="408"/></a>';
link[3] = '<a href="" target="_blank" rel="noopener nofollow"><img src="" width="300" height="408"/></a>';
random = Math.random() * (link.length);
random = Math.floor(random);
document.write(link[random]);

解决方法

看起来不需要数组或随机性，因为链接 HTML 都是一样的。使用 <a> 创建一个 createElement，然后使用 CSS 选择器将其插入到文档中的适当位置。您需要某种方法来唯一标识此 <div> - 如果已经有一个类，则使用一个类，或者为 div 指定一个类，例如 link-container:

const a = document.createElement('a');
a.target = '_blank';
a.rel = 'noopener nofollow';
// do you want to add a non-empty src to the a here?
const img = a.appendChild(document.createElement('img'));
img.width = 300;
img.height = 408;
// do you want to add a non-empty src to the image here?

// insert <a> at the bottom of this div:
document.querySelector('.link-container').appendChild(a);

,

document.write(link[random]);

部分可以替换为：

document.body.innerHTML = document.body.innerHTML + link[random];

同样值得研究 createElement 来创建锚点等 DOM 对象。

,

好吧，我找到了另一个解决我的问题的方法，我把代码留在这里，以防其他人需要在 wordpress 中放入一个带有图像的小部件，这些小部件是使用自己的链接随机生成的，而不是使用弃用的代码 document.write

<div id="bloquewidget">
<a id="a" rel="nofollow noopener noreferrer" target="_blank"><img id="image" /></a>

<script type='text/javascript'> 
var images = 
[
    imageUrlPair = { ImgSrc:"your URL image here",Href:"your URL here" },imageUrlPair = { ImgSrc:"your URL image here",]

function randImg() {
var size = images.length;
var x = Math.floor(size * Math.random());
var randomItem = images[x];
document.getElementById('image').src = randomItem.ImgSrc;
document.getElementById('a').href = randomItem.Href;
document.getElementById("image").height = "408";
document.getElementById("image").width = "300";

}

randImg();
</script>