Question

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

我使用Javascript创建了幻灯片。 HTML调用静态图像以在浏览器中未启用Javascript的情况下显示。如果在浏览器中启用了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;
}

以下是随附的HTML：

<body onLoad="preloader();random_img();">
.
.
.
<a href="#" onclick="f_slideshow(-1);return false;">
<img src="images/header_img1.png" alt="" width="26" height="207" /></a>
<img src="images/header_img1.jpg" alt="" width="529" height="197" class="img-1" name="faces" />
<a href="#" onclick="f_slideshow(1);return false;">
<img src="images/header_img2.png" alt="" width="27" height="207" /></a>

如何在启用Javascript时更改我的内容，您没有看到两个循环图像？

Answer 1

在你的preLoader()操作样式中，如果启用了javascript，则隐藏要隐藏的元素。

这样，如果它被启用，元素将隐藏，如果不是，显然隐藏它们的javascript将无法运行。

例如

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

domElement.style.display = 'none';

Answer 2

这是解决我问题的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];
}

可降级JavaScript幻灯片显示的问题

2 个答案: