javascript - Javascript 中的随机背景图像

Question

这是我的代码:

function drawBgrImage() {

    var random = Math.round(Math.random() * 8 + 1);
    var folder;
    var path;

    if (window.innerWidth <= 768) {
        folder = "xs";
    } else if (window.innerWidth <= 1200) {
        folder = "sm";
    } else {
        folder = "lg";
    }

    path = '"url(/wp-content/themes/BLANK-Theme/images/' + folder + '/' + random + '.jpg)"';
    console.log(path);
    document.getElementById("bgrImg").style.backgroundImage = path;
    /*document.getElementById("bgrImg").style.backgroundImage = "url(/wp-content/themes/BLANK-Theme/images/lg/2.jpg)";*/
}


window.onload = drawBgrImage();

在文件夹 xs、sm 和 lg 中，我有 9 个 .jpg 文件。函数.drawBgrImage()用于绘制1到9之间的数字，并在指定的#bgrImg上设置图像背景。 尽管 var path 返回相同的值，但与注释行一样，它不起作用。

有什么想法吗？ 提前致谢。

Answer 1

它不起作用，因为 onload 应该是一个函数，但您没有提供它。应该是:

window.onload = drawBgrImage;

通过在函数名称后面加上括号，您可以立即调用它并分配 window.onload 返回值(在您的情况下未定义)。

另一个问题是您将路径 url 包含在不必要的引号中。像这样修复它:

path = 'url(/wp-content/themes/BLANK-Theme/images/' + folder + '/' + random + '.jpg)';