个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我们需要从右向左完全移动一个 div(在 div 标签内有背景图片和 img)，一旦 div 完全消失，我们需要再次从右开始移动 div，但在 div 内有不同的图像。
一旦 div 完全消失，我们将 div 中的图像源更改为新图像。但是在新图像显示在 div 上之前，旧图像会暂时显示。
下面是源代码。
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
background-image: url("background/moon_bg.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 100%;
width: 100%;
margin: 0px;
}
#board {
position: absolute;
background-repeat: no-repeat;
z-index: 99999;
}
</style>
</head>
<body>
<div id="board">
<img id="poster" src="//:0">
</div>
<script>
var board = document.getElementById('board');
var poster = document.getElementById('poster');
var poster_images = ['IronMan.png',
'gladiator.png',
'Ghostbusters.png'];
let bd_image_path = 'url(billboard/b.png)';
let posterIndex = 0;
let newPoster = true;
let posterPath = 'posters/' + poster_images[posterIndex];;
function moveLeft()
{
if(newPoster === true) {
if(poster.complete === true) {
poster.style.left = '10px';
poster.style.top = '65px';
poster.style.width = '422px';
poster.style.height = '198px';
poster.style.position = 'absolute';
board.style.width = "441px";
board.style.height = "395px";
board.style.left = (window.innerWidth - 441) + "px";
board.style.top = (window.innerHeight - 415) + "px";
board.style.backgroundImage = bd_image_path;
poster.style.display = 'block';
newPoster = false;
}
else {
console.log('in else');
}
}
else {
board.style.left = board.style.left || 0;
if(parseInt(board.style.left) <= -(parseInt(board.style.width))) {
newPoster = true;
posterIndex ++;
if(posterIndex >= poster_images.length) {
posterIndex = 0;
}
posterPath = 'posters/' + poster_images[posterIndex];
poster.style.display = 'none';
}
else {
board.style.left = parseInt(board.style.left) - 2 + 'px';
poster.style.left = '10px'
poster.style.top = '65px';
poster.style.width = '422px';
poster.style.height = '198px';
poster.style.position = 'absolute';
poster.src = posterPath;
}
}
requestAnimationFrame(moveLeft);
}
moveLeft();
</script>
</body>
</html>
谁能帮我解决这个问题。
最佳答案
我相信这归结为缓存问题，您可以通过添加标识符来告诉浏览器它是一个新图像来解决这个问题，时间通常是最简单的方法。
poster.src = posterPath + '?' + new Date().getTime();
关于javascript - 即使在更改源后也会暂时显示旧图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49933360/
24
4
0
我正在使用 typedef 的第三方库s byte至 char . (这很糟糕，因为 char 可能是 signed 或 unsigned，具体取决于编译器的选择)。 不幸的是typedef已经溢出到
每当我做一个工作任务时，我都会在git中创建一个本地分支，然后我需要在实际工作之前修改一堆配置文件(主要包含数据库的连接字符串)以设置为我的本地环境。我不想在完成任务后将这些更改推送到存储库。 实际上
我有一个生成大量可能状态的方法，当使用 , 链接它时与(有条件的)fail或 tactic no_tac ，由此产生的组合方法需要很长时间才能终止并导致 Isabelle 界面滞后。但是，当使用两个
为了从转储中恢复数据库，我想暂时禁用数据库所有表中的所有约束，我清空了这些表的内容(postregsql 8.3)。 是否有一种安全的方法来修改 pg_constraint 表中的字段，从而轻松绕过约
在 my usecase我正在尝试同步两个 Elasticsearch 索引。由于版本控制，这实际上是 quite simple 。不过，我想在这样做的同时随时继续写作。 好的，我想按时间顺序执行的步
我需要在 Symfony (1.3.8) 支持的网站上执行升级/增强。该站点将至少离线几天。有谁知道如何使用 Symfony 框架设置“临时离线”页面？ 最佳答案 以下是来自 A Gentle Int
我正在为 UIAlertView 创建一个包装器(我知道 UIAlertController 和一些已经存在的包装器，它也用于教育目的)。 假设它看起来像这样(非常简短的版本): @interface
一点背景—— 我运行一个使用 Java 运行的游戏服务器，以及一个使用 PHP (phpbb) 运行的论坛。我将游戏和论坛账号关联起来，这样在游戏中更改密码会自动更改论坛账号的密码。这两个系统使用不同
我在我的 System76 Oryx 笔记本电脑上使用 Ubuntu 16.04。触控板非常敏感，所以我曾经使用 Fn+F1 禁用它。这在 18.04 中不再起作用。我环顾四周，发现: synclie
当我对 Haskell 程序进行原型(prototype)设计时，我总是会收到数百条这样的警告(不是开玩笑): /Users/bob/SourceCode/course/is/expriment/Li
据我了解，如果我想在我的 EF6 应用程序中使用延迟加载，我应该将我的关系编码为这样，最后两项标记为虚拟: public class Test { public int TestId { ge
我正在一个有2d map 的项目中: QMap > slot_pic; 我设置了一个表来初始化值: slot_pic[0][0] = QPixmap("path..."); slot_pic[1][
我刚刚修改了 cytoscape.js 的示例(“动画 BFS”)并添加了一些节点: $(function(){ // on dom ready $('#cy').cytoscape({ style:
UIScroll View 让我在一页内容太多时声明一个可滚动区域。奇怪的是，有问题的 ScrollView 在 X 轴上的行为符合预期，不允许任何滚动。不幸的是，Y 轴——需要滚动的地方——不会将允
我是 Maven 新手，而且我也没有太多使用 Eclipse 的经验。 要从 Eclipse 中的构建中排除 java 文件，我右键单击这些文件并选择“构建路径”->“排除”。这对于 Eclipse
我从 GLM 库的 #pragma message 收到许多消息。有没有办法抑制这些，最好是暂时的(只针对那个库)？ 最佳答案 我能想到的最佳解决方案是将 g++ 的输出通过管道传输通过过滤器，即 g
在现代浏览器上下文中的 JS 中(特别是 Chrome，但任何答案都很有趣)我如何临时覆盖 Object.prototype.toString 或任何其他 native 代码方法，以便新实现实际接收通
我是一名优秀的程序员,十分优秀！