当图片获取失败时onerror和onload

本文介绍了在网页开发中处理图片加载失败的方法,通过使用onerror和onload事件来实现图片加载失败后的隐藏或替换,默认图片的无限循环问题及其解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近项目中遇到一个问题,当图片加载不出来时。在pc,mobile上面,图片的位置是空白的。但是苹果pad上面,图片的位置是一个淡淡的方框,如图

134421_aefb_2608629.png

于是就想到给这个无法显示的图片加一个visibility: hidden;这样就看不见,并且位置还保留着。同理,也可以替换为一张默认图片。

与加载有关的事件有2个,onerror和onload

1.使用onerror解决img加载失败的问题

先看一看官网对该事件的介绍

onerror 事件会在文档或图像加载过程中发生错误时被触发。

支持该事件的 HTML 标签:

<img>, <object>, <style>

支持该事件的 JavaScript 对象:

window, image
demo1.图片获取失败时制空
//当图片加载失败时,隐藏图片
<img onerror="checkError()"/>
<script>
function checkError(e){
    e.target.style.visibility = 'hidden';
}
</script>

实验得知,1.当图片地址为空时,会触发该事件。2.当图片有地址,但是没图片,在获取失败404时也会触发该事件

demo2.图片获取失败时,用默认图片替换

//当图片加载失败时,替换图片为default.png
<img onerror="checkError()"/>
<script>
function checkError(e){
    e.target.src = 'default.png';
}
</script>

但是如果默认图片也获取失败时,将会进入无限替换的循环中。

//当图片加载失败时,替换图片为default.png
<img onerror="checkError()"/>
<script>
function checkError(e){
    if(e.target.src == 'default.png'){
      return false
    }
    e.target.src = 'default.png';
}
</script>

2.使用onload解决img加载失败的问题 

先看一看官网对该事件的介绍

onload 事件会在页面或图像加载完成后立即发生。

onload 常用在 <body> 中,一旦完全加载所有内容(包括图像、脚本文件、CSS 文件等),就执行一段脚本

支持该事件的 HTML 标签:

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的 JavaScript 对象:

image, layer, window

 

转载于:https://my.oschina.net/zhangyafei/blog/1650009

内容概要:本文详细比较了GPU、TPU专用AI芯片在大模型推理优化方面的性能、成本及适用场景。GPU以其强大的并行计算能力和高带宽显存,适用于多种类型的神经网络模型和计算任务,尤其适合快速原型开发和边缘计算设备。TPU专为机器学习设计,擅长处理大规模矩阵运算密集型任务,如Transformer模型的推理,具有高吞吐量和低延迟特性,适用于自然语言处理和大规模数据中心的推理任务。专用AI芯片通过高度定制化架构,针对特定神经网络模型进行优化,如卷积神经网络(CNN),在处理特定任务时表现出色,同时具备低功耗和高能效比的优势,适用于边缘计算设备。文章还介绍了各自的优化工具和框架,如CUDA、TensorRT、TPU编译器等,并从硬件成本、运营成本和开发成本三个角度进行了成本对比。 适合人群:从事人工智能、深度学习领域的研究人员和技术人员,尤其是对大模型推理优化感兴趣的读者。 使用场景及目标:①帮助读者理解GPU、TPU和专用AI芯片在大模型推理中的优缺点;②为选择适合的硬件平台提供参考依据,以实现最优的推理性能和成本效益;③介绍各种优化工具和框架,帮助开发者高效部署和优化模型。 其他说明:本文不仅涵盖了硬件架构特性,还深入探讨了优化技术和应用场景,旨在为读者提供全面的技术参考。在选择硬件平台时,需综合考虑具体任务需求、预算限制及开发资源等因素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值