可降解JavaScript幻灯片放映问题

更新：我编辑了下面的代码，以显示我在尝试使用CSS可见性时使用的内容。我仍然被这个问题困扰着。我还尝试从body onLoad中删除preload（）函数，但是我不能使用getElementById，因为元素还没有加载。我最后的想法是从HTML本身中调用rand（5），这样如果启用了Javascript，它会在图像文件名的末尾添加一个数字，但我甚至不知道如何将其直接合并到HTML中。任何帮助都将不胜感激

---

我用Javascript创建了一个幻灯片。当浏览器中未启用Javascript时，HTML将调用静态图像来显示。如果浏览器中启用了Javascript，则应该在静态图像的位置加载随机图像

我遇到的问题是，当启用Javascript时，您会看到页面加载了静态图像，然后，如果随机图像不同，您会看到它很快加载。所以看起来两个图像在页面加载时快速循环

下面是我正在使用的Javascript代码：

// Define images used in slideshow
imgArray = new Array(
"header_img1.jpg",
"header_img2.jpg",
"header_img3.jpg",
"header_img4.jpg",
"header_img5.jpg"
);
baseURL = "images/";

// Preload slideshow images
function preloader() {

    domElement = document.getElementById('gallery-image');
    domElement.style.visibility = "hidden";

    // counter
    var i = 0;

    // create object
    imageObj = new Image();

    // start preloading imgArray
    for (i=0; i<3; i++) {
        imageObj.src=imgArray[i];
    }
}


// Select random image to display for slideshow
function random_img() {

    domElement.style.visibility = "visible";
    rand = Math.round(Math.random()*(imgArray.length - 1));
    document["faces"].src = baseURL + imgArray[rand];
    rand += 1;
}

//定义幻灯片放映中使用的图像
imgArray=新阵列(
“header_img1.jpg”，
“header_img2.jpg”，
“header_img3.jpg”，
“header_img4.jpg”，
“header_img5.jpg”
);
baseURL=“images/”；
//预加载幻灯片图像
函数预加载程序（）{
domeElement=document.getElementById（'gallery-image'）；
domElement.style.visibility=“隐藏”；
//柜台
var i=0；
//创建对象
imageObj=新图像（）；
//开始预加载imgaray
对于（
preload（）
中的（i=0；i），如果启用了javascript，请操纵样式以隐藏要隐藏的元素

这样，如果启用，元素将隐藏；如果未启用，则隐藏元素的javascript将不会运行

范例

var domElement = document.getElementById('id-of-element');

domElement.style.display = 'none';

这是解决我的问题的JavaScript代码：

// Define images used in slideshow
imgArray = new Array(
    "header_img1.jpg",
    "header_img2.jpg",
    "header_img3.jpg",
    "header_img4.jpg",
    "header_img5.jpg"
);
baseURL = "images/";


// Hide static image and preload slideshow images
function preloader() {

    // counter
    var i = 0;

    // create object
    imageObj = new Image();

    // start preloading imgArray
    for (i=0; i<3; i++) {
        imageObj.src=imgArray[i];
    }

}

// Control previous/next functions of slideshow
numImages = imgArray.length;
function f_slideshow( xflip ) {

    // grab source of current image
    var curImage = document["faces"].src;

    // get image number from string and convert to int
    curImage = parseInt(curImage.substring(curImage.length-5, curImage.length));

    // create source for next/previous link
    curImage = curImage + xflip;
    if (curImage > numImages)
        { curImage = 1 ; } 
    if (curImage == 0)
        { curImage = numImages ; }      
    document["faces"].src = baseURL + imgArray[curImage - 1];
}

//定义幻灯片放映中使用的图像
imgArray=新阵列(
“header_img1.jpg”，
“header_img2.jpg”，
“header_img3.jpg”，
“header_img4.jpg”，
“header_img5.jpg”
);
baseURL=“images/”；
//隐藏静态图像和预加载幻灯片图像
函数预加载程序（）{
//柜台
var i=0；
//创建对象
imageObj=新图像（）；
//开始预加载imgaray
对于（i=0；i数字图像）
{curImage=1；}
if（curImage==0）
{curImage=numImages；}
document[“faces”].src=baseURL+imgArray[curImage-1]；
}
谢谢！这是朝着正确的方向迈出的一步。我改为操纵可见性，使图像仍然占据相同的空间，然后在
random\u img（）的开头使元素可见我喜欢你的帮助。是的。当我被打电话时，我正在写解释。我没能在Firefox中检查这个解决方案。我仍然看到了最初的图像加载，然后是随机图像加载。下面是这个问题的网站：
// Define images used in slideshow
imgArray = new Array(
    "header_img1.jpg",
    "header_img2.jpg",
    "header_img3.jpg",
    "header_img4.jpg",
    "header_img5.jpg"
);
baseURL = "images/";


// Hide static image and preload slideshow images
function preloader() {

    // counter
    var i = 0;

    // create object
    imageObj = new Image();

    // start preloading imgArray
    for (i=0; i<3; i++) {
        imageObj.src=imgArray[i];
    }

}

// Control previous/next functions of slideshow
numImages = imgArray.length;
function f_slideshow( xflip ) {

    // grab source of current image
    var curImage = document["faces"].src;

    // get image number from string and convert to int
    curImage = parseInt(curImage.substring(curImage.length-5, curImage.length));

    // create source for next/previous link
    curImage = curImage + xflip;
    if (curImage > numImages)
        { curImage = 1 ; } 
    if (curImage == 0)
        { curImage = numImages ; }      
    document["faces"].src = baseURL + imgArray[curImage - 1];
}