如何使用CSS和Javascript强制重载背景图片< div>

yhuiod9q 于 2023-05-02 发布在 Java

关注(0)|答案(2)|浏览(161)

我想建立一个非常简单的网页幻灯片放映显示一个新的照片，每隔几秒钟使用HTML，CSS和Javascript。我设法让它在我的Linux机器上用Firefox在本地运行，但只要我通过我的Linux Apache VPS运行节目，事情就崩溃了，照片图像在Firefox或Chrome中没有更新，尽管HTML页面按预期重新加载。图像“”的URL。/slsh.jpg”位于我的Apache服务器上，实际上是一个随机但定期更新的符号链接，指向存储在那里的许多照片中的一张。
正如你在下面看到的，我从web上继承了一个示例代码，使用div“a”中的一些CSS技巧在浏览器窗口中显示全尺寸的图片。这个设置似乎工作得很好，除了我不能让独特的“URL +时间戳”方法与Javascript操作。我很可能不知道如何更新背景图像的URL字符串，因为我可能搞砸了我的Javascript行或ID引用，如“a”。
只要我使用Javascript行开始与“文件。getElement...”脚本似乎只是崩溃了，HTML页面不再重新加载，也不显示新的图像-除了当我手动强制重新加载它与ctrl+shift+r在Chrome中。

<script>
  var timestamp = new Date().getTime();
  document.getElementById("a").style.backgroundImage = "url(./slsh.jpg?t=" + timestamp + ")";
  window.setInterval('refresh()', 3000);
  function refresh() {
      location.reload();
</script>

<style>
  body, html {
      height: 100%;
      margin: 0;
  }
  .bg {
      background-image: url('./slsh.jpg');
      height: 100%; 
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: rgb(10,10,10);
  }
</style>

<!DOCTYPE html>
<html>
<head>
<!--- here sits my CSS code --->
<!--- here sits my javascript code --->
</head>
<body id="body">
  <div class="bg" id="a"></div>
</body>

</html>

这是怎么了？为了使此照片幻灯片放映顺利进行，需要调整或添加哪些内容？我在网上看到了很多建议-但我的具体情况有所不同，因为我使用div和backgroundImage解决方案，以我想要的方式显示我的照片。

css

来源：https://stackoverflow.com/questions/76139294/how-to-force-reload-background-image-in-div-using-css-and-javascript

2条答案

按热度按时间

pprl5pva1#

你不必为了改变图片而重新加载整个html页面，事实上，如果你不这样做，你可以预先缓存图片，从而使幻灯片显示更流畅。举个例子

注意：将我懒惰的listOfImageUrls更改为您自己的URL数组到不同的图片。
**幻灯片。简体中文

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slideshow</title>
  <link rel="stylesheet" href="slideshow.css">
</head>

<body>
  <script src="slideshow.js"></script>
</body>

</html>

**幻灯片。简体中文

body {
  background-color: black;
  background-size: cover;
  background-attachment: fixed;
}

slidehow.js

// How many seconds before shifting image
const secondsBetweenSlides = 5;

// An array of image urls - just generating from unsplash for now
const listOfImageUrls = [...new Array(15)].map(() =>
  `https://source.unsplash.com/random/?food&nocache=${Math.random()}`);

// Sleep for a number of ms
const sleep = ms => new Promise(res => setTimeout(res, ms));

// Run the show
const slideShow = async () => {
  while (true) {
    let imageToShow = listOfImageUrls.shift();
    listOfImageUrls.push(imageToShow)
    document.body.style.backgroundImage = `url(${imageToShow})`;
    await sleep(secondsBetweenSlides * 1000);
  }
}

slideShow();

赞(0）回复(0）举报 2023-05-02

9q78igpj2#

这个问题的解决方案相当简单。我更新了javascript的'refresh'函数，去掉了位置。reload（）行并移到文档中。getElement...line：

<script>
  window.setInterval('refresh()', 10000);
  function refresh() {
    //location.reload();
    var timestamp = new Date().getTime();
    document.getElementById("a").style.backgroundImage = url(./slsh.jpg?t=" + timestamp + ")";
  }
</script>

呃，解决了。谢谢你，托马斯，你的评论！

赞(0）回复(0）举报 2023-05-02

我来回答

如何使用CSS和Javascript强制重载背景图片< div>

2条答案

相关问题

热门标签

最新问答