每隔几秒钟更改一次镜像的src
每隔几秒钟更改一次镜像的src
提问于 2020-01-11 13:09:44
我试图显示相同的图像，这是一个gif(动画)和jpeg。我每隔几秒钟就会更换一次src。
我在dev工具中看到src已经改变，但是gif没有动画效果。
setInterval(function(){
if(c == 1){
imgExt = 'assets/images/resize.gif'
++c;
}
else{
imgExt = 'assets/images/resize.jpg';
--c;
}
// document.querySelector('#floorImgId').src = imgExt;
$('#floorImgId').attr('src', imgExt);
}, 3000)`当我检查元素时，它正在改变，但在页面中，gif不播放。我做错了什么？
回答 3
Stack Overflow用户
发布于 2020-01-11 13:28:11
您需要首先设置c = 1，这样++c才能正常工作：
(有些程序员喜欢在0和1之间切换，而您的原始代码则在1和2之间切换。两者都起作用，这取决于你。)
在0和1之间切换
(我也可能使用prop()而不是attr()，但为了使其与原始版本保持一致：)
let c = 0;
setInterval(function() {
if (c === 0) {
imgExt = 'https://i.imgur.com/GCPeHoX.png';
++c;
} else {
imgExt = 'https://i.imgur.com/J2wgZZb.png';
--c;
}
// document.querySelector('#floorImgId').src = imgExt;
$('#floorImgId').attr('src', imgExt);
}, 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="floorImgId">
如果只是切换，我倾向于使用：
let toggle = true;
setInterval(function() {
if (toggle) {
imgExt = 'https://i.imgur.com/GCPeHoX.png';
} else {
imgExt = 'https://i.imgur.com/J2wgZZb.png';
}
toggle = !toggle;
// document.querySelector('#floorImgId').src = imgExt;
$('#floorImgId').attr('src', imgExt);
}, 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="floorImgId">
为了隐藏toggle，这样它就不会污染外部作用域，只需将整个东西包装在一个生命中，或者您也可以使用：
setInterval((function() {
let toggle = true;
return function() {
if (toggle) {
imgExt = 'https://i.imgur.com/GCPeHoX.png';
} else {
imgExt = 'https://i.imgur.com/J2wgZZb.png';
}
toggle = !toggle;
// document.querySelector('#floorImgId').src = imgExt;
$('#floorImgId').attr('src', imgExt);
};
}()), 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="floorImgId">
Stack Overflow用户
发布于 2020-01-11 13:30:38
从你的代码中，我认为你必须在else语句中增加c，在if语句中减少c：
c=0;
setInterval(function(){
if(c == 1){
imgExt = 'assets/images/resize.gif'
--c;
}
else{
imgExt = 'assets/images/resize.jpg';
++c;
}
// document.querySelector('#floorImgId').src = imgExt;
$('#floorImgId').attr('src', imgExt);
}, 3000)Stack Overflow用户
发布于 2020-01-11 13:35:16
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img id="floorImgId" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Hamiltonian_path.svg/440px-Hamiltonian_path.svg.png" />
<script>
var c = 1,imgExt = "";
setInterval(function(){
if(c == 1){
imgExt = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Hamiltonian_path.svg/440px-Hamiltonian_path.svg.png'
++c;
}
else{
imgExt = 'https://buffer.com/library/wp-content/uploads/2016/06/giphy.gif';
--c;
}
$('#floorImgId').attr('src', imgExt);
}, 3000);
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59691837
复制相关文章
相似问题
腾讯云开发者
