我正在尝试将动画 GIF 插入网页，尽管这会正确插入代码，但不会使用内容更新页面

Question

我正在使用 JavaScript 将 GIF 放在背景上，尽管这会创建下面的文本但不会更新页面我不确定为什么没有人可以提供帮助？

在调试器中，如果我在控制台中键入变量，它会在 object_dj 中返回以下内容：

<div id="DJ" class="DJvid" style="background-image: url(http://d.ezyro.com/images/ezgif-2-f0284e7093b1.gif)"></div>

我使用的JavaScript是

object_dj = document.getElementById("DJ");
baseURL = "http://d.ezyro.com/";
object_dj.setAttribute('style', 'background-image: url('+baseURL+'images/ezgif-2-f0284e7093b1.gif)');

P.S网站d不存在

现在，随着这一步的进行，必须有一个丢失的重绘或者一些你可以指导我通过更新页面来完成这个工作的东西。

我试过这只是用一些垃圾改变了数据：

object_dj.style.opacity=0.99;
setTimeout(()=> {object_dj.style.opacity=''},0);

还尝试并验证了图像：

var imageUrl = "images/bandicam 2023-03-31 14-59-01-846.gif";
const pUrl = new URL(baseURL, imageUrl);
object_dj.style.backgroundImage = `url("${pUrl}")`;

错误

VM313:1 Uncaught ReferenceError: imageURL 未定义 在 eval (eval 在 (music_now_playing.php:1:1), :1:1) 在：1：1

我尝试添加变量 决定不报错了

这是来自控制台，您的示例没有在我的网站上加载 url：

bpm
<div class=​"hidden" id=​"#bpm">​196​</div>​
imageUrl
'images/bandicam 2023-03-31 14-59-01-846.gif'
object_dj.style.backgroundImage

pUrl
VM110:1 Uncaught ReferenceError: pUrl is not defined
    at eval (eval at <anonymous> (music_now_playing.php:1:1), <anonymous>:1:1)
    at <anonymous>:1:1
eval @ VM110:1
(anonymous) @ VM96:1
baseURL
'http://d.ezyro.com/'
imageURL
VM147:1 Uncaught ReferenceError: imageURL is not defined
    at eval (eval at <anonymous> (music_now_playing.php:1:1), <anonymous>:1:1)
    at <anonymous>:1:1

似乎是 imageURL 导致了问题？

我也试过： stackflow.com/questions/8840580/force-dom-redraw-refresh-on-mac 但没有一个答案有效。有没有新的方法来做到这一点？

object_dj.scrollBy(0,0) 也没有；形成它并且它没有在 JQuery.fn.redraw() 中重新识别 JQuery

Answer 1

前提是服务器给你的图像没问题……它可能被缓存在某个地方？重绘或以其他方式强制重新渲染可能会起作用。试试这样：

object_dj = document.getElementById("DJ");
baseURL = "http://d.ezyro.com/";
imageUrl = baseURL + "images/ezgif-2-f0284e7093b1.gif";
object_dj.style.backgroundImage = "url(" + imageUrl + ")";
object_dj.parentNode.removeChild(object_dj);
object_dj.parentNode.appendChild(object_dj);

Answer 2

这是我要做的：

首先，可能是找不到 URL 的某种问题。因此，请确保您尝试提供的图像确实存在。如果图像确实存在，也可能是您的基本 URL 和路径没有正确连接，创建了一个不存在的 URL。为确保正确连接，请勿自行插入字符串。相反，最好让 URL API 为您做这件事。

此外，我发现将

.setAttribute()

设置为适当的值比使用

.style.backgroundImage

更容易，但是，它本质上是相同的过程。

这是我编写的一些代码的示例。注意：我更改了示例 URL，因为您问题中的那个不存在：

const base = 'https://www.cutecatgifs.com';
const path = 'wp-content/uploads/2013/06/Monday.gif';
const el = document.getElementById('content');

const url = new URL(path, base);
el.style.backgroundImage = `url("${url}")`;

#content {
  color: red; /* just for visibility */
  width: 300px;
  height: 300px;
}

<div id="content">
  Example content
</div>