html图片慢慢消失的事件,[Web前端]用javascript实现默认图片替代未显示的图片
这天气实在太燥热了,还好装了空调,总算能静下来分享点干货。页面在加载图片的时候,有时候会出现“因图片错误未显示“或者“还在预加载ing”,我们常会用到默认图片来替代,避免页面上出现空白或者红叉的情况,看到下面的图,你能直视吗?
如何实现这样的效果呢,方法如下:
利用javascript中 image 对象的 onerror 事件来判断,出错则更换image对象的src为默认图片的 URL。
JavaScript onerror 事件
使用 onerror 事件是一种老式的标准的在网页中捕获javascript错误的方法。
只要页面中出现脚本错误,就会产生 onerror 事件。如果需要利用 onerror 事件,就必须创建一个处理错误的函数。你可以把这个函数叫作
onerror 事件处理器 (onerror event
handler)。这个事件处理器使用三个参数来调用:msg(错误消息)、url(发生错误的页面的 url)、line(发生错误的代码行)。οnerrοr=handleErrfunction handleErr(msg,url,l)
{
//Handle the error here
return true or false
}
浏览器是否显示标准的错误消息,取决于 onerror 的返回值。如果返回值为 false,则在控制台 (javascript console) 中显示错误消息。反之则不会。
下面的例子展示如何使用 onerror 事件来捕获错误:
οnerrοr=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="There was an error on this page.nn"
txt+="Error: " + msg + "n"
txt+="URL: " + url + "n"
txt+="Line: " + l + "nn"
txt+="Click OK to continue.nn"
alert(txt)
return true
}
function message()
{
adddlert("Welcome guest!")
}
总结
方法不止一种,但是这种方法比较实用,您有其他好的方法,可以留言分享给我们。
html图片慢慢消失的事件,[Web前端]用javascript实现默认图片替代未显示的图片相关推荐
- 【从0到1学Web前端】javascript中的ajax对象(一)
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
- JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
- web前端分享JavaScript到底是什么?特点有哪些?
web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容.今天为大家分享了这篇关于JavaScript的文章,我们一起来看看. 一.JavaScript是什么? ...
- Web前端之JavaScript基础
Web前端之JavaScript基础 JavaScript介绍 变量 变量类型 基本的数据类型Number String Boolean underfined null typeof运算符 引用的数据 ...
- Web前端:JavaScript最强总结 附详细代码 (带常用案例!)
Web前端基础: Web前端:HTML最强总结 附详细代码 Web前端:CSS最强总结 附详细代码 Web前端:JavaScript最强总结 附详细代码 Web前端工具: Web前端: JQuery最 ...
- web前端培训:CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 好程序员web前端分享javascript枚举算法
好程序员web前端分享javascript枚举算法,题目:在1,2,3,4,5 五个数中,我们随机选取 3个数.问有多少种取法?并且把每种取出数的方法列举出来. 乍看这道题,其实感觉没什么难度.三个f ...
- 三星手机实现airtest自动化屏幕显示比例小或测试报告中操作的位置未显示在图片上
三星手机实现airtest自动化屏幕显示比例小或测试报告中操作的位置未显示在图片上 1.三星手机连接到airtestIDE中只显示了很小一部分,如图所示: 2.测试报告中操作的位置未显示在图片上,如图 ...
- 【web前端】JavaScript实现图片幻灯片滚动播放动画效果
JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co ...
- web前端高级JavaScript - 彻底掌握基于HTTP网络层的“前端性能优化”
彻底掌握基于HTTP网络层的 "前端性能优化" 产品性能优化方案 HTTP网络层优化 代码编译层优化 webpack 代码运行层优化 html/css javascript vue ...
最新文章
- 【PHP】 获取网站信息
- DolphinScheduler对比Airflow
- 重磅!清华这个决定冲上热搜!网友:不愧是清华…
- 输入过滤筛选下拉信息(类似百度输入)
- POST 请求出现异常!java.io.IOException: Server returned HTTP response code: 400 for URL
- java扫描指定主机的端口socket服务
- Java clone克隆方法 --深拷贝--浅拷贝 --原型模型
- linux教程第六章,linux教程第六章.ppt
- java 编写浏览器_用Java自己写一个浏览器 —— JavaFX 入门
- AI智能语音系统源码搭建
- 一个简单的时间片轮转多道程序内核代码
- 是的你没看错,HTTP3来了
- SMART PLC和V90伺服实现外部脉冲位置控制
- HCL实验-使用ACL进行SSH服务器的登录源限制的简单实验(NAT+SSH+ACL)
- [USACO20JAN]Loan Repayment S
- ICPR MTWI 2018 挑战赛二:网络图像的文本检测
- java基于ssm开发的电视剧播放视频系统页面很漂亮哦
- 第6章gp_toolkit管理架构_gp_bloat_diag
- 【Steam】关于上传游戏至Steam,Depot产生的问题
- ipad iphone开发_如何在iPhone或iPad上取消应用订阅