有一种方法可以防止img src标记在被新的src替换后调用旧的src,就是在给img元素设置新的src之前,先将该img元素设置为不可见,然后再修改src属性,并在新的src加载完毕后,再将img元素设置为可见。
下面是一个示例代码,用于实现上述的逻辑:
<img id="myImage" src="old_image.jpg" style="display: none;">
<script>
var img = document.getElementById("myImage");
var newSrc = "new_image.jpg";
// 设置新的src之前,将img元素设置为不可见
img.style.display = "none";
// 修改src属性为新的src
img.src = newSrc;
// 监听新的src加载完成的事件
img.addEventListener("load", function() {
// 加载完成后,将img元素设置为可见
img.style.display = "block";
});
</script>
上述代码中,我们通过将img元素的display样式属性设置为"none"来将其隐藏。然后,我们修改img元素的src属性为新的src。最后,通过监听img元素的load事件,在新的src加载完成后,将img元素的display样式属性设置为"block",使其恢复可见。
这种方法可以确保在新的src加载完成之前,不会显示旧的src,从而实现了一旦img src标记被新的src替换,就不会转到旧的src的效果。
在腾讯云的产品中,推荐使用腾讯云对象存储(COS)来存储和管理图片资源。腾讯云对象存储(COS)是一种高可用、高可扩展的云存储服务,适用于图片、音视频、文件等数据的存储和分发。您可以通过腾讯云对象存储(COS)来存储新的图片资源,并在需要时通过修改img元素的src属性来切换到新的图片资源。
您可以通过以下链接了解更多关于腾讯云对象存储(COS)的信息: https://cloud.tencent.com/product/cos
领取专属 10元无门槛券
手把手带您无忧上云