首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法一旦img src标记被新的src替换,调用就不会转到旧的src?

有一种方法可以防止img src标记在被新的src替换后调用旧的src,就是在给img元素设置新的src之前,先将该img元素设置为不可见,然后再修改src属性,并在新的src加载完毕后,再将img元素设置为可见。

下面是一个示例代码,用于实现上述的逻辑:

代码语言:txt
复制
<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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

用 PhantomJS 让邮件报表图文并茂(一)

传统报表邮件中,只能以简单 table 表格来展示数据,一但数据维度增加、业务日渐复杂,报表邮件将变得越来越冗杂、难以理解。 那么有没有什么办法,让邮件也能实现图文并茂图表呢?...所以将网页内 canvas 内容都提取出来,放到相同大小 img 标签内,替换掉原本文档流中 canvas,这样在邮件客户端内就能看到图表内容了吧?...img.width = canvas.width; img.height = canvas.height; img.src = canvas.toDataURL();...接下来则是将 canvas 替换为使用 cid 标记附件资源 img 标签: // 用附件图片替换 canvas function replaceCanvasWithImage() { page.evaluate...// img.src = canvas.toDataURL(); img.src = 'cid: ' + imageFileName; canvas.parentElement.insertBefore

82020

图片懒加载原理及实现(java懒加载原理)

s640"> 它用src来链接外部资源,用来替换这个位置。它是可以无视跨域(基于这一点,才有了jsonp跨域实现)。...2,实现图片懒加载原理 看到这里,我们已经明白了图片加载是src属性做事情,那么我们只要不给这个src属性赋值不就不会发起请求了嘛!!...然后,html5还提供自定义属性方式:data-xxx 我们可以先把图片地址存在这里面,然后判断这个图片是否进入屏幕了,一旦进入屏幕,就把这个图片地址赋值给src,让它发起请求获取图片不就好了!...通常是一张loadinggif动图,这样可以给用户带来更好体验,但是问题又出现了!占位图片它既然也是通过src取得,那它占那么多位置,不也需要发起请求嘛???...过去,要检测一个元素是否可见或者两个元素是否相交并不容易,很多解决办法不可靠或性能很差。

1.7K30
  • 微信公众号搭建chatgpt客服

    ,我们这里配置是/meesage/simple,如果没有成功,需要进行下面步骤进行排查:(1)服务有没有正常启动,看日志(2)端口有没有设置错误,这个很多次没有注意到<img src="https:/...,可以调用微信官方/cgi-bin/message/custom/send接口来实现主动回复,但是对于个人公众号,没有权限调用,只能尝试别的办法。...限频chatgpt毕竟也是上线,火热是肯定,聊天窗口只能开几个,api调用的话,也是有限频,但是规则具体没有找到,只是在调用次数过多时候会报429错误,出现之后就需要等待一个小时左右。...对于这个解决办法只能是多开几个账号,一旦429就只能换个账号重试了。...6.2 秘钥key更新没有找到详细规则,凭个人经验的话,可能github提交代码会被扫描,可能ip调用来源不一样,最好还是开发一个秘钥,生产一个秘钥吧。

    4K31

    一文梳理vue面试题知识点

    有一些数据首次渲染后就不会再变化,对应DOM也不会变化。那么优化过程就是深度遍历AST树,按照相关条件对树节点进行标记。...解析模板指令,将模板中变量替换成数据,然后初始化渲染页面视图,并将每个指令对应节点绑定更新函数,添加监听数据订阅者,一旦数据有变动,收到通知,更新视图Watcher订阅者是Observer和Compile...key是为Vue中vnode标记唯一id,通过这个key,我们diff操作可以更准确、更快速diff算法过程中,先会进行新旧节点首尾交叉对比,当无法匹配时候会用节点key与节点进行比对...、尾、头、尾.准确: 如果不加key,那么vue会选择复用节点(Vue就地更新策略),导致之前节点状态保留下来,会产生一系列bug.快速: key唯一性可以Map数据结构充分利用...获取值是响应式2.5 修改state数据 <img alt="Vue logo" src=".

    94230

    诡异【session丢失】和【标签】

    项目发布到服务器上面了,但是客户在使用时候发现,只要进入新增页面和修改页面。再进行操作就会自动跳转到登陆页面(我设置了session保存用户登陆信息),而别的页面就不会出现这个问题。...这下来劲了,肯定是这几个控件原因,于是乎,我就一个一个控件还原回去,不跳转!继续还原!!当我还原到这个控件时候测试,发现问题了!...只要我一加上这个标签!页面就跳转到登陆页面了。问题肯定出在这了!...在网上找了下资料,没找到相关资料,后来试着将img 标签src=""加上图片,src="imges/001.jpg" 再测试,发现页面不跳转了!!原来问题出现在这里!...所以就只要想了个办法,将src=""里面加上图片,幸好这个img标签是隐藏起来,加了也不影响界面。呵呵。。。

    1.3K50

    使用 Vim jump list 看代码

    像搜索(search), 替换(substitue)和标记(mark)命令都被认为是一个“jump”(跳转),但是在一个文件中进行滚动并不是一个 jump. 详见 :h jump-motions....> 上图中可以看出,行号为 0 上下方都是从 1 开始编号,它们分别代表了比当前位置更位置。下方是比当前位置位置,使用 Ctrl-I 进行跳转。...上方是比当前位置位置,使用 Ctrl-O 进行跳转: Ctrl-I 会跳转到行号为 0 下方编号为 1 位置,也就是 1 21 5 type MessageType uint16....Ctrl-O 会跳转到 1 420 24 ~/go/src/github.com/lightningnetwork/lnd/fundingmanager_test.go 在 Ctrl-I 和 Ctrl-O...比如 4 然后 Ctrl-I 会跳转到 5 14 5 ~/go/src/github.com/lightningnetwork/lnd/lnwire/accept_channel.go.

    1.2K20

    上传图片后如何不依赖后端回显?你可能需要indexedDB存储技术

    以下正文: 今天看到有人在群里提问说,有一个业务场景,用户上传图片后,图片要回显,不依赖后端,刷新浏览器后也会显示,我是存放在localStorage里面,如果图片超过5MB就超过最大存储了,有没有什么办法...一、依赖后端图片回显 一般都是在图片上传后(不清楚如果上传图片可以参考这篇文章:前端如何上传文件),后端会给我们返回一个上传成功后图片地址,然后我们用该地址替换img标签src即可,这是常规操作...然后用这个url作为imgsrc即可进行图片回显。...(this.files[0]); console.log(src); imgDom.src = src; } 下图是imgsrc: 参考链接: https://developer.mozilla.org...通俗地说,IndexedDB 就是浏览器提供本地数据库,它可以网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。

    2K20

    HTML 常见面试题速查

    和 href 区别 src 用于替换当前元素, href 用于在当前文档和引用资源建立关系 src 是指向外部资源位置,指向内容会嵌入到文档中当前标签所在位置,在请求 src 资源时会将其指向资源下载并应用到文档内...="common.css" rel="stylesheet" /> # img srcset 作用是什么 可以设计响应式图片,可以使用两个属性 srcset 和 sizes 来提供更多额外资源图像和提示...浏览器会选择最匹配子 ,如果没有匹配,就选择 元素 src URL。然后,所选图像呈现在 元素占据空间中。...添加 src 属性 # label 作用是什么,如何使用 用来定义表单控制间关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关表达控件上 Name:</...DNS 缓存 CDN 缓存 浏览器缓存 服务器缓存 # 大图加载优化 图片懒加载:先将 img src 设为同一张图片,将实际图片地址存储在其他地方(如 img 自定义属性 data-src),当

    78920

    使用Selenium爬取淘宝商品

    所以,直接在页面跳转文本框中输入要跳转页码,然后点击“确定”按钮即可跳转到页码对应页面。...随后,调用send_keys()方法将页码填充到输入框中,然后点击“确定”按钮即可。 那么,怎样知道有没有转到对应页码呢?我们可以注意到,成功跳转某一页后,页码都会高亮显示,如下图所示。 ?...比如,查看一下商品信息源码,如下图所示。 ? 可以发现,它是一个img节点,包含id、class、data-src、alt和src等属性。...这里之所以可以看到这张图片,是因为它src属性赋值为图片URL。把它src属性提取出来,就可以获取商品图片了。...因此,我们需要先利用find()方法找到图片这个节点,然后再调用attr()方法获取商品data-src属性,这样就成功提取了商品图片链接。

    3.7K70
    领券