Question

im使用此脚本在页面刷新时旋转和更改图像，它可以正常工作，但有时在更改为新图像之前它会多次加载同一图像，是否有办法解决此问题？

var theImages = [
      "1.jpg",
      "2.jpg",
      "3.jpg"
      ];
      function changeImage(){
      var size=theImages.length;
      var x = Math.floor(size*Math.random())
      document.getElementById("headerbanner").src = theImages[x];
    }

onload=changeImage

Answer 1

要实现所需的图像旋转行为，您需要“记住”页面加载之间的某些状态（即，您之前的图像）。一种简单的方法是使用LocalStorage API小瓶。

例如，您可以通过以下方式检索键的先前存储的值：

let lastIndex = localStorage.getItem('last_index');

然后使用它来控制从阵列中显示哪个图像。您还可以使用：

localStorage.setItem('last_index', `${ lastIndex }`)

要更新存储的值，请重新装入下一页。这些可能一起与您的代码集成在一起，如下所示：

  /* Get the last stored index, and parse to an integer */
  let lastIndex = Number.parseInt(localStorage.getItem('last_index'))

  if(Number.isNaN(lastIndex)) {
    /* If we got an invalid index (ie no previously stored value) set to default 0 */
    lastIndex = 0;
  }
  else {
    /* Otherwise increment the index counter. This is going to cause the image to
    change every page load */
    lastIndex ++; 
  }

  /* Remember the updated index for future reloads */
  localStorage.setItem('last_index', `${ lastIndex }`)

  var theImages = [
    "1.jpg",
    "2.jpg",
    "3.jpg"
    ];

    function changeImage(){

    var size=theImages.length;

    /* Use the modulo operators to get x based on lastIndex, and the total number
    of images */
    var x = lastIndex % size;

    document.getElementById("headerbanner").src = theImages[x];
  }

  window.onload=changeImage

请记住，LocalStorage API将值设置为strings，这就是为什么需要Number.parseInt()等的原因。

Answer 2

在刷新后实现轮换的一种好方法是将以前的图像索引保存在url中，并每次更改它。

1）您进入页面，查询参数图片为空，获取索引为1的图片，并将网址设置为mysite.com?imageid=1

2）刷新，查询参数为1，在url中将其设置为2并显示图像（这里没有随机性，但从未获得相同的图像）

3）实现自定义逻辑以适合任何索引，您可以对先前的图像ID实施随机性！==以始终通过递归while循环获取其他图像：

while (newImageId === queryParam.imageId) { getRandomImageId(queryParam.imageId)}

我在手机上无法编写代码，但可以使用window.location作为网址

Answer 3

将当前图像保存到本地会话中。

localStorage.setItem('lastImage', imageIndex);

页面加载后...

localStorage.getItem('lastImage');

...并将其从您的随机机制中排除或进行迭代。

页面刷新时更改图像有时会保持加载相同的图像

3 个答案: